Welcome to JS Bin

JS Bin

Save
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <script src="https://rawgit.com/ractivejs/ractive-adaptors-rxjs/master/vendor/ractive/ractive.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/rxjs/2.3.0/rx.all.js"></script>
  <script src="https://rawgit.com/ractivejs/ractive-adaptors-rxjs/master/ractive-adaptors-rxjs.js"></script>
</head>
<body>
  <div class="container" style="padding-top: 40px;">
    <script id="demo-template" type="text/ractive">
<div class="page-header">
      <h1>RxJS for RactiveJS Bindings AutoComplete example</h1>
      <p class="lead">Example to show combining input events such as keyup with Ajax requests</p>
    </div>
    <div class="row-fluid">
      <form role="form">
        <div class="form-group">
          <label for="textInput">Enter Query for Wikipedia</label>
          <input type="text" id="textInput" class="form-control" placeholder="Enter Query...">
          <br />
          <button class="btn btn-primary" id="search">Search</button>
        </div>
      </form>
    </div>
    <div class="row-fluid">    
      <ul id="results">
        {{#results}}
          <li>{{this}}</li>
        {{/results}}
      </ul>
    </div>
    </script>
  </div>
</body>
</html>
 
var ractive = new Ractive({
  el: '.container',
  template: '#demo-template',
  adapt: ['RxJS']
});
​
var searchWikipedia = function(term) {
var defered = $.ajax({
        url: 'http://en.wikipedia.org/w/api.php',
        dataType: 'jsonp',
        data: {
            action: 'opensearch',
            format: 'json',
            search: term
        }
    }).promise();
  
  return Rx.Observable.fromPromise(defered).map(function(response) {
    return response[1];
  });
};
​
var results = Rx.Observable.fromEvent( ractive.find( '#search' ), 'click' ).doAction(function(e) { e.preventDefault(); }).map(function() {
  return ractive.find('#textInput').value;
}).flatMapLatest(searchWikipedia);
​
ractive.set( 'results', results );
Output

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

Dismiss x