Search⌘ K
Home
Courses
Reactive Programming with RxJS

Implementing the Search Term in Cycle.js

Explore how to create a reactive search function in Cycle.js by using RxJS observables to capture user input, throttle requests, and query Wikipedia’s API. Understand how to transform event streams and integrate search queries into a reactive web app using the Model View Intent pattern.

We'll cover the following...

We need a function that returns an Observable of URLs that query Wikipedia’s API using the search terms entered by the user:

JavaScript (JSX)
var MAIN_URL = 'https://en.wikipedia.org'; 
var WIKI_URL = MAIN_URL + '/wiki/';
var API_URL = MAIN_URL + '/w/api.php?' +
'action=query&list=search&format=json&srsearch=';
function searchRequest(responses) 
{
  return responses.DOM.select('.search-field').events('input')
  .debounce(300)
  .map(function(e) 
  { 
    return e.target.value 
  }) 
  .filter(function(value) 
  { 
    return value.length > 2 
  }) 
  .map(function(search) 
  { 
    return API_URL + search 
  });
}

First, we declare some URLs that our application will use to query Wikipedia. In the searchRequest function, we ...