add minlength

RDD2017 · May 10, 2016 · 9507de0 · 9507de0
1 parent 4a121b5
commit 9507de0
Show file tree

Hide file tree

Showing 9 changed files with 37 additions and 14 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,7 +2,9 @@
 
 #### Bug Fixes
 
-- **oi-select:** `select as`  works correct with object data source
+- **oi-select:**
+    - `select as` works correct with object data source
+    - `minlength` is minimum length of query for searching
 
 - **list-placeholder:** placeholder for dropdown list if no items found
 

diff --git a/README.md b/README.md
@@ -107,6 +107,7 @@ Use `oi-select` directive:
   * `newItemFn` — function which get query and return new item object or promise. F.e. `'addItem($query)'`
   * `removeItemFn` — function which get removed item model and return any value or promise. If promise was rejected, item wouldn't removed. F.e. `'removeItem($item)'`
   * `maxlength` — maximum number of characters allowed in the input
+  * `minlength` — minimum number of characters for searching
 
 ### oiSelect service
  * `options` — default options which we can override in `oiSelectProvider.options`

diff --git a/dist/select-tpls.js b/dist/select-tpls.js
@@ -12,7 +12,8 @@ angular.module('oi.select')
             editItem:       false,
             newItem:        false,
             closeList:      true,
-            saveTrigger:    'enter tab blur'
+            saveTrigger:    'enter tab blur',
+            minlength:      0
         },
         version: {
             full: '0.2.21',
@@ -533,10 +534,12 @@ angular.module('oi.select')
                 });
 
                 scope.$watch('query', function(inputValue, oldValue) {
-                    if (saveOn(inputValue.slice(0, -1), inputValue.slice(-1))) {
+                    if (saveOn(inputValue.slice(0, -1), inputValue.slice(-1)) || //terminated symbol
+                        String(inputValue).length < options.minlength) { //length less then minlength
                         return;
                     }
 
+
                     //We don't get matches if nothing added into matches list
                     if (inputValue !== oldValue && (!scope.oldQuery || inputValue) && !matchesWereReset) {
                         listElement[0].scrollTop = 0;
@@ -799,6 +802,9 @@ angular.module('oi.select')
                 }
 
                 function click(event) {
+                    //query length less then minlength
+                    if (scope.query.length < options.minlength) return;
+
                     //option is disabled
                     if (oiUtils.contains(element[0], event.target, 'disabled')) return;
 

diff --git a/dist/select-tpls.min.js b/dist/select-tpls.min.js
diff --git a/dist/select.js b/dist/select.js
@@ -12,7 +12,8 @@ angular.module('oi.select')
             editItem:       false,
             newItem:        false,
             closeList:      true,
-            saveTrigger:    'enter tab blur'
+            saveTrigger:    'enter tab blur',
+            minlength:      0
         },
         version: {
             full: '0.2.21',
@@ -533,10 +534,12 @@ angular.module('oi.select')
                 });
 
                 scope.$watch('query', function(inputValue, oldValue) {
-                    if (saveOn(inputValue.slice(0, -1), inputValue.slice(-1))) {
+                    if (saveOn(inputValue.slice(0, -1), inputValue.slice(-1)) || //terminated symbol
+                        String(inputValue).length < options.minlength) { //length less then minlength
                         return;
                     }
 
+
                     //We don't get matches if nothing added into matches list
                     if (inputValue !== oldValue && (!scope.oldQuery || inputValue) && !matchesWereReset) {
                         listElement[0].scrollTop = 0;
@@ -799,6 +802,9 @@ angular.module('oi.select')
                 }
 
                 function click(event) {
+                    //query length less then minlength
+                    if (scope.query.length < options.minlength) return;
+
                     //option is disabled
                     if (oiUtils.contains(element[0], event.target, 'disabled')) return;
 

diff --git a/dist/select.min.js b/dist/select.min.js
diff --git a/docs/examples/validation/template.html b/docs/examples/validation/template.html
@@ -77,14 +77,15 @@ <h2>Validation</h2>
 
 <br/>
 
-<p>Also you can set maximum number of characters allowed in the input</p>
+<p>Also you can set maximum number of characters allowed in the input and minimum number of characters to prevent searching if query is too small</p>
 <div class="row">
     <div class="col-md-8">
         <oi-select
                 oi-options="item.name for item in shopArr"
                 ng-model="bundle3"
                 oi-select-options="{
-                    maxlength: 3
+                    maxlength: 4,
+                    minlength: 2
                 }"
                 placeholder="Select"
         ></oi-select>
@@ -96,7 +97,8 @@ <h2>Validation</h2>
 oi-options="item.name for item in shopArr"
 ng-model="bundle3"
 oi-select-options="{
-    maxlength: 3
+    maxlength: 4,
+    minlength: 2
 }"
 </div>
 <div class="col-md-4"><pre>

diff --git a/src/directives.js b/src/directives.js
@@ -200,10 +200,12 @@ angular.module('oi.select')
                 });
 
                 scope.$watch('query', function(inputValue, oldValue) {
-                    if (saveOn(inputValue.slice(0, -1), inputValue.slice(-1))) {
-                        return;
-                    }
+                    //terminated symbol
+                    if (saveOn(inputValue.slice(0, -1), inputValue.slice(-1))) return;
 
+                    //length less then minlength
+                    if (String(inputValue).length < options.minlength) return;
+
                     //We don't get matches if nothing added into matches list
                     if (inputValue !== oldValue && (!scope.oldQuery || inputValue) && !matchesWereReset) {
                         listElement[0].scrollTop = 0;
@@ -466,6 +468,9 @@ angular.module('oi.select')
                 }
 
                 function click(event) {
+                    //query length less then minlength
+                    if (scope.query.length < options.minlength) return;
+
                     //option is disabled
                     if (oiUtils.contains(element[0], event.target, 'disabled')) return;
 

diff --git a/src/services.js b/src/services.js
@@ -11,7 +11,8 @@ angular.module('oi.select')
             editItem:       false,
             newItem:        false,
             closeList:      true,
-            saveTrigger:    'enter tab blur'
+            saveTrigger:    'enter tab blur',
+            minlength:      0
         },
         version: {
             full: '0.2.21',