Merge pull request darylrowland#4 from metalgvc/master

Highlight part of search string in result title - thanks to metalgvc!
padic · Feb 6, 2014 · b8a75cb · b8a75cb
2 parents 4940ffb + f86408c
commit b8a75cb
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 17 deletions.
diff --git a/angucomplete.js b/angucomplete.js
@@ -5,7 +5,7 @@
  */
 
 angular.module('angucomplete', [] )
-    .directive('angucomplete', function ($parse, $http) {
+    .directive('angucomplete', function ($parse, $http, $sce) {
     return {
         restrict: 'EA',
         scope: {
@@ -21,9 +21,10 @@ angular.module('angucomplete', [] )
             "userPause": "@pause",
             "localData": "=localdata",
             "searchFields": "@searchfields",
-            "minLengthUser": "@minlength"
+            "minLengthUser": "@minlength",
+            "matchClass": "@matchclass"
         },
-        template: '<div class="angucomplete-holder"><input id="{{id}}_value" ng-model="searchStr" type="text" placeholder="{{placeholder}}" class="{{inputClass}}" ng-keyup="keyPressed($event)"/><div id="{{id}}_dropdown" class="angucomplete-dropdown" ng-if="showDropdown"><div class="angucomplete-searching" ng-show="searching">Searching...</div><div class="angucomplete-searching" ng-show="!searching && (!results || results.length == 0)">No results found</div><div class="angucomplete-row" ng-repeat="result in results" ng-click="selectResult(result)" ng-mouseover="hoverRow()" ng-class="{\'angucomplete-selected-row\': $index == currentIndex}"><div ng-if="result.image && result.image != \'\'" class="angucomplete-image-holder"><img ng-src="{{result.image}}" class="angucomplete-image"/></div><div>{{result.title}}</div><div ng-if="result.description && result.description != \'\'" class="angucomplete-description">{{result.description}}</div></div></div></div>',
+        template: '<div class="angucomplete-holder"><input id="{{id}}_value" ng-model="searchStr" type="text" placeholder="{{placeholder}}" class="{{inputClass}}" ng-keyup="keyPressed($event)"/><div id="{{id}}_dropdown" class="angucomplete-dropdown" ng-if="showDropdown"><div class="angucomplete-searching" ng-show="searching">Searching...</div><div class="angucomplete-searching" ng-show="!searching && (!results || results.length == 0)">No results found</div><div class="angucomplete-row" ng-repeat="result in results" ng-click="selectResult(result)" ng-mouseover="hoverRow()" ng-class="{\'angucomplete-selected-row\': $index == currentIndex}"><div ng-if="result.image && result.image != \'\'" class="angucomplete-image-holder"><img ng-src="{{result.image}}" class="angucomplete-image"/></div><div ng-if="matchClass" ng-bind-html="result.title"></div><div ng-if="!matchClass">{{ result.title }}</div><div ng-if="result.description && result.description != \'\'" class="angucomplete-description">{{result.description}}</div></div></div></div>',
         controller: function ( $scope ) {
             $scope.lastFoundWord = null;
             $scope.currentIndex = null;
@@ -41,7 +42,7 @@ angular.module('angucomplete', [] )
                 $scope.pause = $scope.userPause;
             }
 
-            $scope.processResults = function(responseData) {
+            $scope.processResults = function(responseData, str) {
                 if (responseData && responseData.length > 0) {
                     $scope.results = [];
 
@@ -71,8 +72,15 @@ angular.module('angucomplete', [] )
                             image = $scope.extractValue(responseData[i], $scope.imageField);
                         }
 
+                        var text = eval(titleCode);
+                        if ($scope.matchClass) {
+                            var re = new RegExp(str, 'i');
+                            var strPart = text.match(re)[0];
+                            text = $sce.trustAsHtml(text.replace(re, '<span class="'+ $scope.matchClass +'">'+ strPart +'</span>'));
+                        }
+
                         var resultRow = {
-                            title: eval(titleCode),
+                            title: text,
                             description: description,
                             image: image,
                             originalObject: responseData[i]
@@ -110,7 +118,7 @@ angular.module('angucomplete', [] )
                         }
 
                         $scope.searching = false;
-                        $scope.processResults(matches);
+                        $scope.processResults(matches, str);
                         $scope.$apply();
 
 
@@ -119,7 +127,7 @@ angular.module('angucomplete', [] )
                             success(function(responseData, status, headers, config) {
                                 $scope.searching = false;
                                 data = $scope.extractValue(responseData, $scope.dataField)
-                                $scope.processResults(data);
+                                $scope.processResults(data, str);
                             }).
                             error(function(data, status, headers, config) {
                                 console.log("error");
@@ -173,6 +181,9 @@ angular.module('angucomplete', [] )
             }
 
             $scope.selectResult = function(result) {
+                if ($scope.matchClass) {
+                    result.title = result.title.toString().replace(/(<([^>]+)>)/ig, '');
+                }
                 $scope.searchStr = result.title;
                 $scope.selectedObject = result;
                 $scope.showDropdown = false;
@@ -228,3 +239,4 @@ angular.module('angucomplete', [] )
         }
     };
 });
+
diff --git a/example/css/structure.css b/example/css/structure.css
@@ -1005,3 +1005,6 @@ td {
     padding: 5px;
 }
 
+.highlight {
+	color: #ff0000;
+}
diff --git a/example/index.html b/example/index.html
@@ -19,7 +19,7 @@ <h2>Awesome Autocompleteness for AngularJS</h2>
             <div class="large-padded-row">
                 <h3>Example 1 - Countries of the World</h3>
                 <div class="padded-row">
-                    <angucomplete id="ex1" placeholder="Search countries" pause="100" selectedobject="selectedCountry" localdata="countries" searchfields="name" titlefield="name" minlength="1" inputclass="form-control form-control-small"/>
+                    <angucomplete id="ex1" placeholder="Search countries" pause="100" selectedobject="selectedCountry" localdata="countries" searchfields="name" titlefield="name" minlength="1" inputclass="form-control form-control-small" matchclass="highlight" />
                 </div>
                 <div class="" ng-show="selectedCountry">
                     You selected <span class="bold-span">{{selectedCountry.originalObject.name}}</span> which has a country code of <span class="bold-span">{{selectedCountry.originalObject.code}}</span>
@@ -31,7 +31,7 @@ <h3>Example 1 - Countries of the World</h3>
             <div class="large-padded-row">
                 <h3>Example 2 - People</h3>
                 <div class="padded-row">
-                    <angucomplete id="ex2" placeholder="Search people" pause="300" selectedobject="selectedPerson" localdata="people" searchfields="firstName,surname" titlefield="firstName,surname" descriptionfield="twitter" imagefield="pic" minlength="1" inputclass="form-control form-control-small"/>
+                    <angucomplete id="ex2" placeholder="Search people" pause="300" selectedobject="selectedPerson" localdata="people" searchfields="firstName,surname" titlefield="firstName,surname" descriptionfield="twitter" imagefield="pic" minlength="1" inputclass="form-control form-control-small" matchclass="highlight" />
                 </div>
                 <div class="" ng-show="selectedPerson">
                     You selected <span class="bold-span">{{selectedPerson.originalObject.firstName}} {{selectedPerson.originalObject.surname}}</span>
@@ -64,4 +64,4 @@ <h5>By Daryl Rowland (<a href="http://twitter.com/darylrowland">@darylrowland</a
             <script src="js/app/directives/angucomplete.js"></script>
         </div>
 	</body>
-</html>
+</html>
diff --git a/example/js/app/directives/angucomplete.js b/example/js/app/directives/angucomplete.js
@@ -5,7 +5,7 @@
  */
 
 angular.module('angucomplete', [] )
-    .directive('angucomplete', function ($parse, $http) {
+    .directive('angucomplete', function ($parse, $http, $sce) {
     return {
         restrict: 'EA',
         scope: {
@@ -21,9 +21,10 @@ angular.module('angucomplete', [] )
             "userPause": "@pause",
             "localData": "=localdata",
             "searchFields": "@searchfields",
-            "minLengthUser": "@minlength"
+            "minLengthUser": "@minlength",
+            "matchClass": "@matchclass"
         },
-        template: '<div class="angucomplete-holder"><input id="{{id}}_value" ng-model="searchStr" type="text" placeholder="{{placeholder}}" class="{{inputClass}}" ng-keyup="keyPressed($event)"/><div id="{{id}}_dropdown" class="angucomplete-dropdown" ng-if="showDropdown"><div class="angucomplete-searching" ng-show="searching">Searching...</div><div class="angucomplete-searching" ng-show="!searching && (!results || results.length == 0)">No results found</div><div class="angucomplete-row" ng-repeat="result in results" ng-click="selectResult(result)" ng-mouseover="hoverRow()" ng-class="{\'angucomplete-selected-row\': $index == currentIndex}"><div ng-if="result.image && result.image != \'\'" class="angucomplete-image-holder"><img ng-src="{{result.image}}" class="angucomplete-image"/></div><div>{{result.title}}</div><div ng-if="result.description && result.description != \'\'" class="angucomplete-description">{{result.description}}</div></div></div></div>',
+        template: '<div class="angucomplete-holder"><input id="{{id}}_value" ng-model="searchStr" type="text" placeholder="{{placeholder}}" class="{{inputClass}}" ng-keyup="keyPressed($event)"/><div id="{{id}}_dropdown" class="angucomplete-dropdown" ng-if="showDropdown"><div class="angucomplete-searching" ng-show="searching">Searching...</div><div class="angucomplete-searching" ng-show="!searching && (!results || results.length == 0)">No results found</div><div class="angucomplete-row" ng-repeat="result in results" ng-click="selectResult(result)" ng-mouseover="hoverRow()" ng-class="{\'angucomplete-selected-row\': $index == currentIndex}"><div ng-if="result.image && result.image != \'\'" class="angucomplete-image-holder"><img ng-src="{{result.image}}" class="angucomplete-image"/></div><div ng-if="matchClass" ng-bind-html="result.title"></div><div ng-if="!matchClass">{{ result.title }}</div><div ng-if="result.description && result.description != \'\'" class="angucomplete-description">{{result.description}}</div></div></div></div>',
         controller: function ( $scope ) {
             $scope.lastFoundWord = null;
             $scope.currentIndex = null;
@@ -41,7 +42,7 @@ angular.module('angucomplete', [] )
                 $scope.pause = $scope.userPause;
             }
 
-            $scope.processResults = function(responseData) {
+            $scope.processResults = function(responseData, str) {
                 if (responseData && responseData.length > 0) {
                     $scope.results = [];
 
@@ -71,8 +72,15 @@ angular.module('angucomplete', [] )
                             image = $scope.extractValue(responseData[i], $scope.imageField);
                         }
 
+                        var text = eval(titleCode);
+                        if ($scope.matchClass) {
+                            var re = new RegExp(str, 'i');
+                            var strPart = text.match(re)[0];
+                            text = $sce.trustAsHtml(text.replace(re, '<span class="'+ $scope.matchClass +'">'+ strPart +'</span>'));
+                        }
+
                         var resultRow = {
-                            title: eval(titleCode),
+                            title: text,
                             description: description,
                             image: image,
                             originalObject: responseData[i]
@@ -110,7 +118,7 @@ angular.module('angucomplete', [] )
                         }
 
                         $scope.searching = false;
-                        $scope.processResults(matches);
+                        $scope.processResults(matches, str);
                         $scope.$apply();
 
 
@@ -119,7 +127,7 @@ angular.module('angucomplete', [] )
                             success(function(responseData, status, headers, config) {
                                 $scope.searching = false;
                                 data = $scope.extractValue(responseData, $scope.dataField)
-                                $scope.processResults(data);
+                                $scope.processResults(data, str);
                             }).
                             error(function(data, status, headers, config) {
                                 console.log("error");
@@ -173,6 +181,9 @@ angular.module('angucomplete', [] )
             }
 
             $scope.selectResult = function(result) {
+                if ($scope.matchClass) {
+                    result.title = result.title.toString().replace(/(<([^>]+)>)/ig, '');
+                }
                 $scope.searchStr = result.title;
                 $scope.selectedObject = result;
                 $scope.showDropdown = false;
@@ -228,3 +239,4 @@ angular.module('angucomplete', [] )
         }
     };
 });
+