Specify field to search on.

By default, search is done on all items, by specifying the searchField in the settings object one can specify on which field of the objects the filtering should be done.

Author: pkempenaers

pages/javascripts/pages/home/ExampleCtrl.js

@@ -1,16 +1,22 @@
 'use strict';
 
 angular.module('exampleApp').controller('ExampleCtrl', ['$scope', function($scope) {
-    $scope.testmodel = {};
+    $scope.testmodel = [];
     $scope.testdata = [
-		{ id: 1, label: "David" },
-		{ id: 2, label: "Jhon" },
-		{ id: 3, label: "Danny" }];
+		{ id: 1, label: "David", age: 23 },
+		{ id: 2, label: "Jhon", age: 24 },
+		{ id: 3, label: "Danny", age: 26 }];
     $scope.testsettings = {
-        closeOnDeselect: true,
-        selectionLimit: 1
+      searchField: 'age',
+      enableSearch: true
     };
 
+    $scope.testevents = {
+      'onMaxSelectionReached': function () { // This event is not firing on selection of max limit
+        alert("you can not select more than 2 contacts");
+      }
+    }
+
     $scope.example1model = [];
 	$scope.example1data = [
 		{id: 1, label: "David"},
@@ -61,7 +67,8 @@ angular.module('exampleApp').controller('ExampleCtrl', ['$scope', function($scop
 		{id: 1, label: "David"},
 		{id: 2, label: "Jhon"},
 		{id: 3, label: "Danny"}];
-	$scope.example7settings = {externalIdProp: ''};
+	$scope.example7settings = { externalIdProp: '' };
+	$scope.customFilter = 'a';
 
 	$scope.example8model = [];
 	$scope.example8data = [
@@ -210,5 +217,13 @@ angular.module('exampleApp').controller('ExampleCtrl', ['$scope', function($scop
     	template: '<b>{{option.name}}</b>'
     };
 
-    $scope.customFilter = 'a';
+    $scope.example20model = [];
+    $scope.example20data = [
+		{ id: 1, label: "David", age: 23 },
+		{ id: 2, label: "Jhon", age: 24 },
+		{ id: 3, label: "Danny", age: 26 }];
+    $scope.example20settings = {
+    	searchField: 'age',
+    	enableSearch: true
+    };
 }]);

pages/javascripts/pages/home/home.html

@@ -23,7 +23,7 @@ <h2 style="margin-bottom: 0">Download</h2>
 		</div>
 	</div>
 	<uib-accordion close-others="true">
-		<!--<uib-accordion-group heading="test Settings Example">
+		<!--<uib-accordion-group heading="test Settings Example" is-open="true" style="height: 500px">
 			<div class="row">
 				<div class="col-xs-12">
 					test
@@ -34,7 +34,7 @@ <h2 style="margin-bottom: 0">Download</h2>
 					<h3>Demo</h3>
 					<div class="well">
 						<div>
-							<div ng-dropdown-multiselect options="testdata" selected-model="testmodel" extra-settings="testsettings"></div>
+							<div ng-dropdown-multiselect options="testdata" selected-model="testmodel" extra-settings="testsettings" events="testevents"></div>
 						</div>
 					</div>
 				</div>
@@ -234,6 +234,48 @@ <h3>Code</h3>
 				</div>
 			</div>
 		</uib-accordion-group>
+		<uib-accordion-group heading="Specifying Search field">
+			<div class="row">
+				<div class="col-xs-12">
+					By default, search is done on all items, by specifying the searchField in the settings object one can specify on which field of the objects the filtering should be done.
+				</div>
+			</div>
+			<div class="row">
+				<div class="col-xs-12 col-sm-6">
+					<h3>Demo</h3>
+					<div class="well">
+						<div>
+							<div ng-dropdown-multiselect="" options="example20data" selected-model="example20model" extra-settings="example20settings"></div>
+						</div>
+					</div>
+				</div>
+				<div class="col-xs-12 col-sm-6">
+					<h3>The model:</h3>
+					<pre>{{example20model|json}}</pre>
+				</div>
+			</div>
+			<div class="row">
+				<div class="col-md-12">
+					<h3>Code</h3>
+					<div hljs language="javascript">
+// HTML
+<div ng-dropdown-multiselect="" options="example20data" selected-model="example20model" extra-settings="example20settings"></div>
+
+// JavaScript
+$scope.example20model = [];
+$scope.example20data = [
+	{ id: 1, label: "David", age: 23 },
+	{ id: 2, label: "Jhon", age: 24 },
+	{ id: 3, label: "Danny", age: 26 }
+];
+$scope.example20settings = {
+	searchField: 'age',
+	enableSearch: true
+};
+					</div>
+				</div>
+			</div>
+		</uib-accordion-group>
 		<uib-accordion-group heading="Selection Limit">
 			<div class="row">
 				<div class="col-xs-12">
@@ -867,6 +909,12 @@ <h2>Settings</h2>
 				<td>false</td>
 				<td>Indicated if to show the search input or not.</td>
 			</tr>
+			<tr>
+				<td>searchField</td>
+				<td>String</td>
+				<td>"$"</td>
+				<td>Indicates on which field the search should be done</td>
+			</tr>
 			<tr>
 				<td>selectionLimit</td>
 				<td>Number</td>

src/angularjs-dropdown-multiselect.js

@@ -38,10 +38,10 @@ directiveModule.directive('ngDropdownMultiselect', ['$filter', '$document', '$co
                 template += '<li ng-show="settings.enableSearch" class="divider"></li>';
 
                 if (groups) {
-                	template += '<li ng-repeat-start="option in orderedItems | filter: searchFilter" ng-show="getPropertyForObject(option, settings.groupBy) !== getPropertyForObject(orderedItems[$index - 1], settings.groupBy)" role="presentation" class="dropdown-header">{{ getGroupTitle(getPropertyForObject(option, settings.groupBy)) }}</li>';
+                	template += '<li ng-repeat-start="option in orderedItems | filter:getFilter(searchFilter)" ng-show="getPropertyForObject(option, settings.groupBy) !== getPropertyForObject(orderedItems[$index - 1], settings.groupBy)" role="presentation" class="dropdown-header">{{ getGroupTitle(getPropertyForObject(option, settings.groupBy)) }}</li>';
                 	template += '<li ng-class="{\'active\': isChecked(getPropertyForObject(option,settings.idProp)) && settings.styleActive}" ng-repeat-end role="presentation">';
                 } else {
-                	template += '<li ng-class="{\'active\': isChecked(getPropertyForObject(option,settings.idProp)) && settings.styleActive}" role="presentation" ng-repeat="option in options | filter: searchFilter">';
+                	template += '<li ng-class="{\'active\': isChecked(getPropertyForObject(option,settings.idProp)) && settings.styleActive}" role="presentation" ng-repeat="option in options | filter:getFilter(searchFilter)">';
                 }
 
                 template += '<a role="menuitem" class="option" tabindex="-1" ng-click="setSelectedItem(getPropertyForObject(option,settings.idProp))">';
@@ -132,7 +132,8 @@ directiveModule.directive('ngDropdownMultiselect', ['$filter', '$document', '$co
                     smartButtonTextConverter: angular.noop,
                     styleActive: false,
                     keyboardControls: false,
-                    template: '{{getPropertyForObject(option, settings.displayProp)}}'
+                    template: '{{getPropertyForObject(option, settings.displayProp)}}',
+                    searchField: '$'
                 };
 
                 $scope.texts = {
@@ -429,6 +430,12 @@ directiveModule.directive('ngDropdownMultiselect', ['$filter', '$document', '$co
                 		}
                 	}
                 }
+								
+                $scope.getFilter = function(searchFilter) {
+                	var filter = {};
+                	filter[$scope.settings.searchField] = searchFilter;
+                	return filter;
+                }
             }
         };
 }]);