angular-ui · dimirc · Aug 29, 2014 · Aug 25, 2014 · Aug 25, 2014 · Aug 25, 2014
diff --git a/examples/demo-disable-search.html b/examples/demo-disable-search.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html lang="en" ng-app="demo">
+<head>
+  <meta charset="utf-8">
+  <title>AngularJS ui-select</title>
+
+  <!--
+    IE8 support, see AngularJS Internet Explorer Compatibility http://docs.angularjs.org/guide/ie
+    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>
+    <script src="http://cdnjs.cloudflare.com/ajax/libs/es5-shim/2.2.0/es5-shim.js"></script>
+    <script>
+      document.createElement('ui-select');
+      document.createElement('ui-select-match');
+      document.createElement('ui-select-choices');
+    </script>
+  <![endif]-->
+
+  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.js"></script>
+  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-sanitize.js"></script>
+  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css">
+
+  <!-- ui-select files -->
+  <script src="../dist/select.js"></script>
+  <link rel="stylesheet" href="../dist/select.css">
+
+  <script src="demo.js"></script>
+
+  <!-- Select2 theme -->
+  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.css">
+
+  <!--
+    Selectize theme
+    Less versions are available at https://github.com/brianreavis/selectize.js/tree/master/dist/less
+  -->
+  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.default.css">
+  <!-- <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.bootstrap2.css"> -->
+  <!-- <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.bootstrap3.css"> -->
+
+  <style>
+    body {
+      padding: 15px;
+    }
+
+    .select2 > .select2-choice.ui-select-match {
+      /* Because of the inclusion of Bootstrap */
+      height: 29px;
+    }
+
+    .selectize-control > .selectize-dropdown {
+      top: 36px;
+    }
+  </style>
+</head>
+
+<body ng-controller="DemoCtrl">
+  <script src="demo.js"></script>
+
+  <button class="btn btn-default btn-xs" ng-click="enableSearch()">Enable search</button>
+  <button class="btn btn-default btn-xs" ng-click="disableSearch()">Disable search</button>
+
+  <button class="btn btn-default btn-xs" ng-click="clear()">Clear ng-model</button>
+
+  <h3>Bootstrap theme</h3>
+  <p>Selected: {{person.selected}}</p>
+  <ui-select ng-model="person.selected" theme="bootstrap" search-enabled="searchEnabled" ng-disabled="disabled" style="min-width: 300px;">
+    <ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.name}}</ui-select-match>
+    <ui-select-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}}
+        age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
+      </small>
+    </ui-select-choices>
+  </ui-select>
+
+  <h3>Select2 theme</h3>
+  <p>Selected: {{person.selected}}</p>
+  <ui-select ng-model="person.selected" theme="select2" search-enabled="searchEnabled" ng-disabled="disabled" style="min-width: 300px;">
+    <ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.name}}</ui-select-match>
+    <ui-select-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}}
+        age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
+      </small>
+    </ui-select-choices>
+  </ui-select>
+
+  <h3>Selectize theme</h3>
+  <p>Selected: {{country.selected}}</p>
+  <ui-select ng-model="country.selected" theme="selectize" search-enabled="searchEnabled" ng-disabled="disabled" style="width: 300px;">
+    <ui-select-match placeholder="Select or search a country in the list...">{{$select.selected.name}}</ui-select-match>
+    <ui-select-choices repeat="country in countries | filter: $select.search">
+      <span ng-bind-html="country.name | highlight: $select.search"></span>
+      <small ng-bind-html="country.code | highlight: $select.search"></small>
+    </ui-select-choices>
+  </ui-select>
+</body>
+</html>
diff --git a/examples/demo.js b/examples/demo.js
@@ -41,6 +41,7 @@ app.filter('propsFilter', function() {
 
 app.controller('DemoCtrl', function($scope, $http, $timeout) {
   $scope.disabled = undefined;
+  $scope.searchEnabled = undefined;
 
   $scope.enable = function() {
     $scope.disabled = false;
@@ -50,6 +51,14 @@ app.controller('DemoCtrl', function($scope, $http, $timeout) {
     $scope.disabled = true;
   };
 
+  $scope.enableSearch = function() {
+    $scope.searchEnabled = true;
+  }
+
+  $scope.disableSearch = function() {
+    $scope.searchEnabled = false;
+  }
+
   $scope.clear = function() {
     $scope.person.selected = undefined;
     $scope.address.selected = undefined;

diff --git a/src/bootstrap/match.tpl.html b/src/bootstrap/match.tpl.html
@@ -3,7 +3,7 @@
         ng-disabled="$select.disabled"
         ng-class="{'btn-default-focus':$select.focus}";
         ng-click="$select.activate()">
-  <span ng-show="$select.isEmpty()" class="text-muted">{{$select.placeholder}}</span>
+  <span ng-show="$select.searchEnabled && $select.isEmpty()" class="text-muted">{{$select.placeholder}}</span>
   <span ng-hide="$select.isEmpty()" ng-transclude></span>
   <span class="caret"></span>
 </button>
diff --git a/src/bootstrap/select.tpl.html b/src/bootstrap/select.tpl.html
@@ -4,6 +4,6 @@
          class="form-control ui-select-search"
          placeholder="{{$select.placeholder}}"
          ng-model="$select.search"
-         ng-show="$select.open">
+         ng-show="$select.searchEnabled && $select.open">
   <div class="ui-select-choices"></div>
 </div>
diff --git a/src/select.js b/src/select.js
@@ -20,6 +20,7 @@
 
   .constant('uiSelectConfig', {
     theme: 'bootstrap',
+    searchEnabled: true,
     placeholder: '', // Empty by default, like HTML tag <select>
     refreshDelay: 1000 // In milliseconds
   })
@@ -107,6 +108,7 @@
     ctrl.focus = false;
     ctrl.focusser = undefined; //Reference to input element used to handle focus events  
     ctrl.disabled = undefined; // Initialized inside uiSelect directive link function
+    ctrl.searchEnabled = undefined; // Initialized inside uiSelect directive link function
     ctrl.resetSearchInput = undefined; // Initialized inside uiSelect directive link function
     ctrl.refreshDelay = undefined; // Initialized inside uiSelectChoices directive link function
 
@@ -486,6 +488,11 @@
           }
         };
 
+        scope.$watch('searchEnabled', function() {
+            var searchEnabled = scope.$eval(attrs.searchEnabled);
+            $select.searchEnabled = searchEnabled !== undefined ? searchEnabled : true;
+        });
+
         attrs.$observe('disabled', function() {
           // No need to use $eval() (thanks to ng-disabled) since we already get a boolean instead of a string
           $select.disabled = attrs.disabled !== undefined ? attrs.disabled : false;

diff --git a/src/select2/match.tpl.html b/src/select2/match.tpl.html
@@ -6,7 +6,7 @@
 <a class="select2-choice ui-select-match"
    ng-class="{'select2-default': $select.isEmpty()}"
    ng-click="$select.activate()">
-  <span ng-show="$select.isEmpty()" class="select2-chosen">{{$select.placeholder}}</span>
+  <span ng-show="$select.searchEnabled && $select.isEmpty()" class="select2-chosen">{{$select.placeholder}}</span>
   <span ng-hide="$select.isEmpty()" class="select2-chosen" ng-transclude></span>
   <span class="select2-arrow"><b></b></span>
 </a>
diff --git a/src/select2/select.tpl.html b/src/select2/select.tpl.html
@@ -5,7 +5,7 @@
   <div class="ui-select-match"></div>
   <div class="select2-drop select2-with-searchbox select2-drop-active"
        ng-class="{'select2-display-none': !$select.open}">
-    <div class="select2-search">
+    <div class="select2-search" ng-show="$select.searchEnabled">
       <input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
              class="ui-select-search select2-input"
              ng-model="$select.search">

diff --git a/src/selectize/match.tpl.html b/src/selectize/match.tpl.html
@@ -1 +1 @@
-<div ng-hide="$select.open || $select.isEmpty()" class="ui-select-match" ng-transclude></div>
+<div ng-hide="$select.searchEnabled && ($select.open || $select.isEmpty())" class="ui-select-match" ng-transclude></div>
diff --git a/src/selectize/select.tpl.html b/src/selectize/select.tpl.html
@@ -7,7 +7,7 @@
            class="ui-select-search"
            placeholder="{{$select.placeholder}}"
            ng-model="$select.search"
-           ng-hide="$select.selected && !$select.open"
+           ng-hide="!$select.searchEnabled || ($select.selected && !$select.open)"
            ng-disabled="$select.disabled">
   </div>
   <div class="ui-select-choices"></div>

diff --git a/test/select.spec.js b/test/select.spec.js
@@ -552,4 +552,66 @@ describe('ui-select tests', function() {
 
   });
 
+  describe('search-enabled option', function() {
+
+    var el;
+
+    function setupSelectComponent(searchEnabled, theme) {
+      el = compileTemplate(
+        '<ui-select ng-model="selection.selected" theme="' + theme + '" search-enabled="' + searchEnabled + '"> \
+          <ui-select-match placeholder="Pick one...">{{$select.selected.name}}</ui-select-match> \
+          <ui-select-choices repeat="person in people | filter: $select.search"> \
+            <div ng-bind-html="person.name | highlight: $select.search"></div> \
+            <div ng-bind-html="person.email | highlight: $select.search"></div> \
+          </ui-select-choices> \
+        </ui-select>'
+      );
+    }
+
+    describe('selectize theme', function() {
+
+      it('should show search input when true', function() {
+        setupSelectComponent('true', 'selectize');
+        expect($(el).find('.ui-select-search')).not.toHaveClass('ng-hide');
+      });
+
+      it('should hide search input when false', function() {
+        setupSelectComponent('false', 'selectize');
+        expect($(el).find('.ui-select-search')).toHaveClass('ng-hide');
+      });
+
+    });
+
+    describe('select2 theme', function() {
+
+      it('should show search input when true', function() {
+        setupSelectComponent('true', 'select2');
+        expect($(el).find('.select2-search')).not.toHaveClass('ng-hide');
+      });
+
+      it('should hide search input when false', function() {
+        setupSelectComponent('false', 'select2');
+        expect($(el).find('.select2-search')).toHaveClass('ng-hide');
+      });
+
+    });
+
+    describe('bootstrap theme', function() {
+
+      it('should show search input when true', function() {
+        setupSelectComponent('true', 'bootstrap');
+        clickMatch(el);
+        expect($(el).find('.ui-select-search')).not.toHaveClass('ng-hide');
+      });
+
+      it('should hide search input when false', function() {
+        setupSelectComponent('false', 'bootstrap');
+        clickMatch(el);
+        expect($(el).find('.ui-select-search')).toHaveClass('ng-hide');
+      });
+
+    });
+
+  });
+
 });
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<div ng-hide="$select.open \|\| $select.isEmpty()" class="ui-select-match" ng-transclude></div>
		<div ng-hide="$select.searchEnabled && ($select.open \|\| $select.isEmpty())" class="ui-select-match" ng-transclude></div>