[bitbake-devel] [PATCH 12/12] bitbake: toastergui: libtoaster typeahead Add in results highlighter

[Ed Bartosh]

From: Michael Wood <michael.g.wood at intel.com>

Add a highlighter for the results in the typeahead, this highlights the
part of the results which is currently being matched. This is a modified
version of the bootstrap stock function with added escaping and the
addition of the details information.

Signed-off-by: Michael Wood <michael.g.wood at intel.com>
Signed-off-by: Ed Bartosh <ed.bartosh at linux.intel.com>
---
 lib/toaster/toastergui/static/js/libtoaster.js | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/lib/toaster/toastergui/static/js/libtoaster.js b/lib/toaster/toastergui/static/js/libtoaster.js
index f6979f6..6ec0337 100644
--- a/lib/toaster/toastergui/static/js/libtoaster.js
+++ b/lib/toaster/toastergui/static/js/libtoaster.js
@@ -56,10 +56,14 @@ var libtoaster = (function (){
           return 1;
         },
         highlighter: function (item) {
-          if (item.hasOwnProperty('detail'))
-            /* Use jquery to escape the value as text into a span */
-            return $('<span></span>').text(item.name+' '+item.detail).get(0);
-          return $('<span></span>').text(item.name).get(0);
+          /* Use jquery to escape the item name and detail */
+          var current = $("<span></span>").text(item.name + ' '+item.detail);
+          current = current.html();
+
+          var query = this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&')
+          return current.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) {
+            return '<strong>' + match + '</strong>'
+          })
         },
         sorter: function (items) { return items; },
         xhrUrl: xhrUrl,
-- 
2.1.4