React 및 ActiveJS를 사용한 자동 완성

function getWikipediaArticles(title: string): Observable<any> {
  const url = "https://en.wikipedia.org/w/api.php";
  const params = new URLSearchParams({
    search: title, // the articles to search for
    action: "opensearch",
    format: "json", // API response type
    origin: "*", // to allow CORS requests
    limit: 3 // maximum number of matched results
  });
  return ajax.getJSON(url + "?" + params);
}

export const searchSystem = new AsyncSystem<string, any, any>({
  QUERY_UNIT: { dispatchDebounce: true }
});

// extract the Observable data Units for easier access
const {queryUnit, dataUnit, errorUnit, pendingUnit} = searchSystem;

// setup a stream using RxJS operators,
// such that at a time only one request is active
const searchStream = queryUnit.future$ // listen for future values emitted by queryUnit, so that it doesn't start making requests immediately
  .pipe(
    filter(query => { // process the typed query
      if (query.trim()) {
        return true; // only proceed if non-empty string
      }
      dataUnit.clearValue(); // if query is empty, clear the data
      return false; // don't go any further
    }),

    // switchMap to ensure only one request at a time
    switchMap(query =>
      // create a new HTTP request Observable
      getWikipediaArticles(query).pipe(
        // format the data, to make it easy to consume
        map(formatSearchResults),
        // dispatch the formatted data to dataUnit
        tap(data => dataUnit.dispatch(data)),

        catchError(err => {
          errorUnit.dispatch(err); // disptach the error
          return EMPTY; // don't let the stream die
        })
      )
    )
  )
  .subscribe(); // activate the stream

// parse and format the data recieved from the Wikipedia REST API
// just trust me on this one ;) it takes the response from the Wikipedia API
// and turns it into an Array of {title: string, url: string} objects
function formatSearchResults([query, titles, noop, urls]) {
  return titles.map((title: string, i: number) => ({
    title,
    url: urls[i]
  }));
}

function App() {
  // create local state to hold the Typeahed data
  const [systemValue, setValue] = useState();
  // extract the data for easier access
  const {query, data, error, pending} = systemValue || {};

  // subscribe to the value changes in the searchSystem the 
  // it will update our local state and trigger re-rendering
  useEffect(() => {
    const subscription = searchSystem.subscribe(setValue);
    return () => subscription.unsubscribe(); // prevent memory leak
  }, []);

  // dispatch the input value to queryUnit
  // to trigger new requests and start the whole process
  const handleInput = e => queryUnit.dispatch(e.target.value)

  // a rudimentary UI with essential components
  return (
    <React.Fragment>
      <input
        onChange={handleInput}
        placeholder="Search Wikipedia, eg: Big Bang"
      />

      {query && 
      <p>
        IsPending: <b>{pending ? 'Yes' : 'No'} </b> |
        Error: <b>{error || 'NA'}</b>
      </p>
      }

      <ul>
        {data?.map(item => 
          <li>
            <a href="{item.url}" target="_blank" rel="noopener">
              {item.title}
            </a>
          </li>
        )}
      </ul>
    </React.Fragment>
  );
}

// render the component
render(<App />, document.getElementById("root"));