Update examples, add new filter propsFilter

Author: tkrotoff

examples/bootstrap.html

@@ -6,7 +6,7 @@
 
   <!--
     IE8 support, see AngularJS Internet Explorer Compatibility http://docs.angularjs.org/guide/ie
-    For Firefox 3.6, you will need to include jQuery
+    For Firefox 3.6, you will also need to include jQuery and ECMAScript 5 shim
   -->
   <!--[if lt IE 9]>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>

examples/demo.html

@@ -6,7 +6,7 @@
 
   <!--
     IE8 support, see AngularJS Internet Explorer Compatibility http://docs.angularjs.org/guide/ie
-    For Firefox 3.6, you will need to include jQuery
+    For Firefox 3.6, you will also need to include jQuery and ECMAScript 5 shim
   -->
   <!--[if lt IE 9]>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
@@ -64,18 +64,24 @@
 
   <h3>Bootstrap theme</h3>
   <p>Selected: {{address.selected.formatted_address}}</p>
-  <ui-select ng-model="address.selected" theme="bootstrap" ng-disabled="disabled" style="width: 300px;">
+  <ui-select ng-model="address.selected"
+             theme="bootstrap"
+             ng-disabled="disabled"
+             reset-search-input="false"
+             style="width: 300px;">
     <match placeholder="Enter an address...">{{$select.selected.formatted_address}}</match>
-    <choices repeat="address in getAddress($select.search) track by $index">
+    <choices repeat="address in addresses track by $index"
+             refresh="refreshAddresses($select.search)"
+             refresh-delay="0">
       <div ng-bind-html="address.formatted_address | highlight: $select.search"></div>
     </choices>
   </ui-select>
 
   <h3>Select2 theme</h3>
   <p>Selected: {{person.selected}}</p>
   <ui-select ng-model="person.selected" theme="select2" ng-disabled="disabled" style="min-width: 300px;">
-    <match placeholder="Select a person in the list or search his *age*...">{{$select.selected.name}}</match>
-    <choices repeat="person in people | filter: {age: $select.search}">
+    <match placeholder="Select a person in the list or search his name/age...">{{$select.selected.name}}</match>
+    <choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
       <div ng-bind-html="person.name | highlight: $select.search"></div>
       <small>
         email: {{person.email}}

examples/demo.js

@@ -2,6 +2,43 @@
 
 var app = angular.module('demo', ['ngSanitize', 'ui.select']);
 
+/**
+ * AngularJS default filter with the following expression:
+ * "person in people | filter: {name: $select.search, age: $select.search}"
+ * performs a AND between 'name: $select.search' and 'age: $select.search'.
+ * We want to perform a OR.
+ */
+app.filter('propsFilter', function() {
+  return function(items, props) {
+    var out = [];
+
+    if (angular.isArray(items)) {
+      items.forEach(function(item) {
+        var itemMatches = false;
+
+        var keys = Object.keys(props);
+        for (var i = 0; i < keys.length; i++) {
+          var prop = keys[i];
+          var text = props[prop].toLowerCase();
+          if (item[prop].toString().toLowerCase().indexOf(text) !== -1) {
+            itemMatches = true;
+            break;
+          }
+        }
+
+        if (itemMatches) {
+          out.push(item);
+        }
+      });
+    } else {
+      // Let the output be the input untouched
+      out = items;
+    }
+
+    return out;
+  }
+});
+
 app.controller('DemoCtrl', function($scope, $http) {
   $scope.disabled = undefined;
 
@@ -32,13 +69,13 @@ app.controller('DemoCtrl', function($scope, $http) {
   ];
 
   $scope.address = {};
-  $scope.getAddress = function(address) {
+  $scope.refreshAddresses = function(address) {
     var params = {address: address, sensor: false};
     return $http.get(
       'http://maps.googleapis.com/maps/api/geocode/json',
       {params: params}
     ).then(function(response) {
-      return response.data.results;
+      $scope.addresses = response.data.results
     });
   };
 

examples/select2-bootstrap3.html

@@ -6,7 +6,7 @@
 
   <!--
     IE8 support, see AngularJS Internet Explorer Compatibility http://docs.angularjs.org/guide/ie
-    For Firefox 3.6, you will need to include jQuery
+    For Firefox 3.6, you will also need to include jQuery and ECMAScript 5 shim
   -->
   <!--[if lt IE 9]>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>

examples/selectize-bootstrap3.html

@@ -6,7 +6,7 @@
 
   <!--
     IE8 support, see AngularJS Internet Explorer Compatibility http://docs.angularjs.org/guide/ie
-    For Firefox 3.6, you will need to include jQuery
+    For Firefox 3.6, you will also need to include jQuery and ECMAScript 5 shim
   -->
   <!--[if lt IE 9]>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>