Welcome to JS Bin

JS Bin

Save
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.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="//cdnjs.cloudflare.com/ajax/libs/rxjs/2.3.0/rx.all.js"></script>
  <script src="https://rawgit.com/Reactive-Extensions/rx.angular.js/master/rx.angular.js"></script>
</head>
<body ng-app="app">
  <div class="container" ng-controller="WikiSearchController">
    <div class="page-header">
      <h3>RxJS for AngularJS Bindings AutoComplete example use $eventToObservable</h3>
      <p class="lead">Example to show combining input events such as keyup with Ajax requests</p>
    </div>
    <div class="row-fluid">
      <form ng-submit="submit(search)">
        <div class="form-group">
          <label for="textInput">Enter Query for Wikipedia</label>
          <input type="text" id="textInput" ng-model="search" class="form-control" placeholder="Enter Query...">
        </div>
      </form>
    </div>
    <div class="row-fluid">    
      <ul id="results">
        <li ng-repeat="result in results">
        {{ result }}
      </li>
      </ul>
    </div>
  </div>
</body>
</html>
 
var app = angular.module('app', ['rx']);
​
app.controller('WikiSearchController', ['$scope', '$http','rx', function($scope, $http, rx) {
            $scope.search = '';
            $scope.results = [];
​
            var search = function(term) {
​
                var deferred = $http({
                        url: "http://en.wikipedia.org/w/api.php?&callback=JSON_CALLBACK",
                        method: "jsonp",
                        params: {
                            action: "opensearch",
                            search: term,
                            format: "json"
                        }
                    });
​
                return rx.Observable
                         .fromPromise(deferred)
                         .retry(10) // Retry 10 times then give up
                         .map(function(response){
                             return response.data[1];
                         });
            };
​
          /*
             The following code deals with:
             
             - throttleing the user input (we don't want to query the wikipedia API on each
             key stroke but rather when the user *stopped typing*)
             
             - filtering duplicates (eg. user types "house" (waits 500ms) types another letter and removes it
             immediatly again which would normaly result into another query with "house" even if thats
             what we are already on)
             
             - querying the service
             
             - dealing with out of order responses (when you query a server multiple times so that you have
                 multiple requests "in flight", you can never be sure that the response will arrive in order. 
                 The "Switch" Operator will make sure that everything will be fine.)
             */
​
            $scope
                .$toObservable('search')
                .throttle(300)
                .map(function(data){
                    return data.newValue;
                })
                .distinctUntilChanged()
                .select(search)
                .switchLatest()
                .subscribe(function(val){
                    $scope.results = val;
                });
        }]);
Output

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

Dismiss x