angular-ui · sonicdoe · Nov 15, 2014 · Nov 15, 2014 · Nov 15, 2014 · Nov 15, 2014
diff --git a/examples/demo-minimum-input.html b/examples/demo-minimum-input.html
@@ -0,0 +1,88 @@
+<!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="enable()">Enable ui-select</button>
+  <button class="btn btn-default btn-xs" ng-click="disable()">Disable ui-select</button>
+  <button class="btn btn-default btn-xs" ng-click="clear()">Clear ng-model</button>
+
+  <h3>Select2 theme</h3>
+  <p>Selected: {{person.selected}}</p>
+  <ui-select ng-model="person.selected" theme="select2" minimum-input-length="2" 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" minimum-input-length="2" 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/src/bootstrap/choices.tpl.html b/src/bootstrap/choices.tpl.html
@@ -1,11 +1,14 @@
 <ul class="ui-select-choices ui-select-choices-content dropdown-menu"
     role="menu" aria-labelledby="dLabel"
-    ng-show="$select.items.length > 0">
+    ng-show="$select.items.length > 0 || $select.search.length < $select.minimumInputLength">
   <li class="ui-select-choices-group">
     <div class="divider" ng-show="$select.isGrouped && $index > 0"></div>
     <div ng-show="$select.isGrouped" class="ui-select-choices-group-label dropdown-header" ng-bind-html="$group.name"></div>
     <div class="ui-select-choices-row" ng-class="{active: $select.isActive(this), disabled: $select.isDisabled(this)}">
       <a href="javascript:void(0)" class="ui-select-choices-row-inner"></a>
     </div>
   </li>
+  <li class="ui-select-input-too-short" ng-show="$select.items.length == 0 && $select.search.length < $select.minimumInputLength">
+    Please enter {{$select.minimumInputLength - $select.search.length}} or more characters
+  </li>
 </ul>
diff --git a/src/select.css b/src/select.css
@@ -54,6 +54,11 @@
     border-color: #D44950;
 }
 
+.selectize-dropdown-content > .ui-select-input-too-short {
+  padding: 5px 8px;
+  overflow: hidden;
+}
+
 
 /* Bootstrap theme */
 
@@ -121,7 +126,7 @@
   outline: 0;
 }
 
-.ui-select-bootstrap .ui-select-choices-row>a {
+.ui-select-bootstrap .ui-select-choices-row>a, .ui-select-bootstrap .ui-select-input-too-short {
     display: block;
     padding: 3px 20px;
     clear: both;

diff --git a/src/select.js b/src/select.js
@@ -68,7 +68,8 @@
     searchEnabled: true,
     placeholder: '', // Empty by default, like HTML tag <select>
     refreshDelay: 1000, // In milliseconds
-    closeOnSelect: true
+    closeOnSelect: true,
+    minimumInputLength: 0
   })
 
   // See Rename minErr and make it accessible from outside https://github.com/angular/angular.js/issues/6913
@@ -163,6 +164,7 @@
     ctrl.lockChoiceExpression = undefined; // Initialized inside uiSelect directive link function
     ctrl.closeOnSelect = true; // Initialized inside uiSelect directive link function
     ctrl.clickTriggeredSelect = false;
+    ctrl.minimumInputLength = undefined; // Initialized inside uiSelect directive link function
 
     ctrl.isEmpty = function() {
       return angular.isUndefined(ctrl.selected) || ctrl.selected === null || ctrl.selected === '';
@@ -242,7 +244,7 @@
       // See https://github.com/angular/angular.js/blob/v1.2.15/src/ng/directive/ngRepeat.js#L259
       $scope.$watchCollection(ctrl.parserResult.source, function(items) {
 
-        if (items === undefined || items === null) {
+        if (items === undefined || items === null || ctrl.search.length < ctrl.minimumInputLength) {
           // If the user specifies undefined or null => reset the collection
           // Special case: items can be undefined if the user did not initialized the collection on the scope
           // i.e $scope.addresses = [] is missing
@@ -785,6 +787,11 @@
             $select.searchEnabled = searchEnabled !== undefined ? searchEnabled : uiSelectConfig.searchEnabled;
         });
 
+        scope.$watch('minimumInputLength', function() {
+          var minimumInputLength = scope.$eval(attrs.minimumInputLength);
+          $select.minimumInputLength = minimumInputLength !== undefined ? minimumInputLength : uiSelectConfig.minimumInputLength;
+        });
+
         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;
@@ -934,7 +941,11 @@
           scope.$watch('$select.search', function(newValue) {
             if(newValue && !$select.open && $select.multiple) $select.activate(false, true);
             $select.activeIndex = 0;
-            $select.refresh(attrs.refresh);
+            if ($select.search.length >= $select.minimumInputLength) {
+              $select.refresh(attrs.refresh);
+            } else {
+              $select.items = [];
+            }
           });
 
           attrs.$observe('refreshDelay', function() {

diff --git a/src/select2/choices.tpl.html b/src/select2/choices.tpl.html
@@ -7,4 +7,7 @@
       </li>
     </ul>
   </li>
+  <li class="ui-select-input-too-short select2-no-results" ng-show="$select.items.length == 0 && $select.search.length < $select.minimumInputLength">
+    Please enter {{$select.minimumInputLength - $select.search.length}} or more characters
+  </li>
 </ul>
diff --git a/src/selectize/choices.tpl.html b/src/selectize/choices.tpl.html
@@ -6,5 +6,8 @@
         <div class="option ui-select-choices-row-inner" data-selectable></div>
       </div>
     </div>
+    <div class="ui-select-input-too-short" ng-show="$select.items.length == 0 && $select.search.length < $select.minimumInputLength">
+      Please enter {{$select.minimumInputLength - $select.search.length}} or more characters
+    </div>
   </div>
 </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -7,4 +7,7 @@ @@
           </li>
         </ul>
       </li>
+      <li class="ui-select-input-too-short select2-no-results" ng-show="$select.items.length == 0 && $select.search.length < $select.minimumInputLength">
+        Please enter {{$select.minimumInputLength - $select.search.length}} or more characters
+      </li>
     </ul>