Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.0.6/rx.all.compat.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>RxJS AutoCompletion Example</title>
</head>
<body>
<input id="input" />
<ul id="results" />
</body>
</html>
 
var $input = $('#input') //输入框
var originInputStream = Rx.Observable.fromEvent($input, 'keyup')
var resultInputStream = originInputStream
    .debounce(500 /* ms */)
    .map(evt => evt.target.value)
    .filter(text => text.length > 2 )
    .distinctUntilChanged()
function searchWikipedia (term) {
  return $.ajax({
    url: 'https://en.wikipedia.org/w/api.php',
    dataType: 'jsonp',
    data: {
      action: 'opensearch',
      format: 'json',
      search: term
    }
  }).promise();
}
var suggestionStream = resultInputStream.flatMapLatest(searchWikipedia)
var $results = $("#results") // ul to hold the results
suggestionStream.subscribe(
  data => {
    $results
      .empty()
      .append($.map(data[1], value =>  $('<li>').text(value)))
  },
  error=> {
    $results
      .empty()
      .append($('<li>'))
        .text('Error:' + error);
  })
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers