add support for suggested values for a search parameter with typeahead support, fixed #11

Author: dnauck

CHANGELOG.md

@@ -1,3 +1,6 @@
+### 2.1.0 - unreleased
+* add support for suggested values for a search parameter with typeahead support, fixed #11
+
 ### 2.0.1 - 14 December 2015
 * enter and leave edit mode methods and events was not called every time due ng-if directive, fixed #17
 * workaround a small timing issue and enable edit mode explicit on newly added parameters

README.md

@@ -125,4 +125,46 @@ $scope.$on('advanced-searchbox:leavedEditMode', function (event, searchParameter
 $scope.$on('advanced-searchbox:modelUpdated', function (event, model) {
   ///
 });
+```
+
+### Available Search Parameters Properties
+
+<table>
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>key</td>
+      <td>Unique key of the search parameter that is used for the ng-model value.</td>
+    </tr>
+    <tr>
+      <td>name</td>
+      <td>User friendly display name of the search parameter.</td>
+    </tr>
+    <tr>
+      <td>placeholder</td>
+      <td>Specifies a short hint in the parameter search box</td>
+    </tr>
+    <tr>
+      <td>suggestedValues</td>
+      <td>An array of suggested search values, e.g. ['Berlin', 'London', 'Paris']</td>
+    </tr>
+    <tr>
+      <td>restrictToSuggestedValues</td>
+      <td>Should it restrict possible search values tothe ones from the suggestedValues array?</td>
+    </tr>
+  </tbody>
+</table>
+
+Full example:
+
+```js
+$scope.availableSearchParams = [
+          { key: "name", name: "Name", placeholder: "Name..." },
+          { key: "city", name: "City", placeholder: "City...", restrictToSuggestedValues: true, suggestedValues: ['Berlin', 'London', 'Paris'] }
+        ];
 ```

src/angular-advanced-searchbox.html

@@ -18,8 +18,13 @@
                        ng-keydown="keydown($event, $index)"
                        ng-blur="leaveEditMode($event, $index)"
                        ng-show="searchParam.editMode"
-                       ng-change="searchParamValueChanged(searchParam)"
+                       ng-change="searchParam.restrictToSuggestedValues !== true ? searchParamValueChanged(searchParam) : null"
                        ng-model="searchParam.value"
+                       typeahead-on-select="searchParamTypeaheadOnSelect($item, searchParam)"
+                       typeahead="suggestedValue for suggestedValue in searchParam.suggestedValues | filter:$viewValue"
+                       typeahead-editable="searchParam.restrictToSuggestedValues !== true"
+                       typeahead-select-on-exact="true"
+                       typeahead-select-on-blur="searchParam.restrictToSuggestedValues !== true ? false : true"
                        placeholder="{{searchParam.placeholder}}" />
             </div>
         </div>
@@ -32,7 +37,7 @@
                placeholder="{{placeholder}}"
                ng-focus="focus = true"
                ng-blur="focus = false"
-               typeahead-on-select="typeaheadOnSelect($item, $model, $label)"
+               typeahead-on-select="searchQueryTypeaheadOnSelect($item, $model, $label)"
                typeahead="parameter as parameter.name for parameter in parameters | filter:isUnsedParameter | filter:{name:$viewValue} | limitTo:parametersDisplayLimit"
                ng-change="searchQueryChanged(searchQuery)"
                ng-model="searchQuery" />

src/angular-advanced-searchbox.js

@@ -105,12 +105,17 @@ angular.module('angular-advanced-searchbox', [])
                             $scope.removeSearchParam(index);
                     };
 
-                    $scope.typeaheadOnSelect = function (item, model, label) {
+                    $scope.searchQueryTypeaheadOnSelect = function (item, model, label) {
                         $scope.addSearchParam(item);
                         $scope.searchQuery = '';
                         updateModel('delete', 'query');
                     };
 
+                    $scope.searchParamTypeaheadOnSelect = function (suggestedValue, searchParam) {
+                        searchParam.value = suggestedValue;
+                        $scope.searchParamValueChanged(searchParam);
+                    };
+
                     $scope.isUnsedParameter = function (value, index) {
                         return $filter('filter')($scope.searchParams, function (param) { return param.key === value.key; }).length === 0;
                     };
@@ -128,6 +133,8 @@ angular.module('angular-advanced-searchbox', [])
                                     key: searchParam.key,
                                     name: searchParam.name,
                                     placeholder: searchParam.placeholder,
+                                    suggestedValues: searchParam.suggestedValues || [],
+                                    restrictToSuggestedValues: searchParam.restrictToSuggestedValues || false,
                                     value: value || ''
                                 }
                             ) - 1;