From 02967b095b8dea856c886f1911e8ab23805dda95 Mon Sep 17 00:00:00 2001
From: laf <neil@lathwood.co.uk>
Date: Wed, 29 Apr 2015 17:48:57 +0100
Subject: [PATCH] Updated all typeahead code to use new library

---
 html/css/styles.css                          |   4 +
 html/includes/modal/alert_schedule.inc.php   |  74 +++++++++---
 html/includes/modal/new_alert_map.inc.php    | 114 ++++++++++++++----
 html/includes/modal/new_alert_rule.inc.php   | 115 +++++++++++++++----
 html/includes/modal/new_device_group.inc.php |  40 +++++--
 html/includes/print-menubar.php              |  18 ++-
 6 files changed, 286 insertions(+), 79 deletions(-)

diff --git a/html/css/styles.css b/html/css/styles.css
index 5846651d67..a9ce14093b 100644
--- a/html/css/styles.css
+++ b/html/css/styles.css
@@ -1635,3 +1635,7 @@ tr.search:nth-child(odd) {
      -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
           box-shadow: 0 5px 10px rgba(0,0,0,.2);
 }
+
+.typeahead-left {
+    left: 0px !important;
+}
diff --git a/html/includes/modal/alert_schedule.inc.php b/html/includes/modal/alert_schedule.inc.php
index dd9b725afc..6afb748fb7 100644
--- a/html/includes/modal/alert_schedule.inc.php
+++ b/html/includes/modal/alert_schedule.inc.php
@@ -147,24 +147,64 @@ $('#add-map').click('',function (event) {
         $('#map-stub').val('');
 });
 
-$('#map-stub').typeahead([
-    {
-      name: 'map_devices',
-      remote : '/ajax_search.php?search=%QUERY&type=device&map=1',
-      header : '<h5><strong>&nbsp;Devices</strong></h5>',
-      template: '{{name}}',
-      valueKey:"name",
-      engine: Hogan
-    },
-    {
-      name: 'map_groups',
-      remote : '/ajax_search.php?search=%QUERY&type=group&map=1',
-      header : '<h5><strong>&nbsp;Groups</strong></h5>',
-      template: '{{name}}',
-      valueKey:"name",
-      engine: Hogan
+var map_devices = new Bloodhound({
+  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
+  queryTokenizer: Bloodhound.tokenizers.whitespace,
+  remote: {
+      url: "ajax_search.php?search=%QUERY&type=device&map=1",
+        filter: function (output) {
+            return $.map(output, function (item) {
+                return {
+                    name: item.name,
+                };
+            });
+        },
+      wildcard: "%QUERY"
+  }
+});
+var map_groups = new Bloodhound({
+  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
+  queryTokenizer: Bloodhound.tokenizers.whitespace,
+  remote: {
+      url: "ajax_search.php?search=%QUERY&type=group&map=1",
+        filter: function (output) {
+            return $.map(output, function (item) {
+                return {
+                    name: item.name,
+                };
+            });
+        },
+      wildcard: "%QUERY"
+  }
+});
+map_devices.initialize();
+map_groups.initialize();
+$('#map-stub').typeahead({
+    hint: true,
+    highlight: true,
+    minLength: 1,
+    classNames: {
+        menu: 'typeahead-left'
     }
-]);
+},
+{
+  source: map_devices.ttAdapter(),
+  async: true,
+  displayKey: 'name',
+  valueKey: name,
+    templates: {
+        suggestion: Handlebars.compile('<p>&nbsp;{{name}}</p>')
+    }
+},
+{
+  source: map_groups.ttAdapter(),
+  async: true,
+  displayKey: 'name',
+  valueKey: name,
+    templates: {
+        suggestion: Handlebars.compile('<p>&nbsp;{{name}}</p>')
+    }
+});
 
 $(function () {
     $("#start").datetimepicker({
diff --git a/html/includes/modal/new_alert_map.inc.php b/html/includes/modal/new_alert_map.inc.php
index 09b0795ca5..99957c2378 100644
--- a/html/includes/modal/new_alert_map.inc.php
+++ b/html/includes/modal/new_alert_map.inc.php
@@ -67,34 +67,98 @@ $('#create-map').on('show.bs.modal', function (event) {
     });
 });
 var cache = {};
-$('#rule').typeahead([
-    {
-      name: 'map_rules',
-      remote : '/ajax_search.php?search=%QUERY&type=alert-rules',
-      template: '{{name}}',
-      valueKey:"name",
-      engine: Hogan
+var alert_rules = new Bloodhound({
+  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
+  queryTokenizer: Bloodhound.tokenizers.whitespace,
+  remote: {
+      url: "ajax_search.php?search=%QUERY&type=alert-rules",
+        filter: function (output) {
+            return $.map(output, function (item) {
+                return {
+                    name: item.name,
+                };
+            });
+        },
+      wildcard: "%QUERY"
+  }
+});
+alert_rules.initialize();
+$('#rule').typeahead({
+    hint: true,
+    highlight: true,
+    minLength: 1,
+    classNames: {
+        menu: 'typeahead-left'
     }
-]);
+},
+{
+  source: alert_rules.ttAdapter(),
+  async: true,
+  displayKey: 'name',
+  valueKey: name,
+    templates: {
+        alert_rules: Handlebars.compile('<p>&nbsp;{{name}}</p>')
+    }
+});
 
-$('#target').typeahead([
-    {
-      name: 'map_devices',
-      remote : '/ajax_search.php?search=%QUERY&type=device&map=1',
-      header : '<h5><strong>&nbsp;Devices</strong></h5>',
-      template: '{{name}}',
-      valueKey:"name",
-      engine: Hogan
-    },
-    {
-      name: 'map_groups',
-      remote : '/ajax_search.php?search=%QUERY&type=group&map=1',
-      header : '<h5><strong>&nbsp;Groups</strong></h5>',
-      template: '{{name}}',
-      valueKey:"name",
-      engine: Hogan
+var map_devices = new Bloodhound({
+  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
+  queryTokenizer: Bloodhound.tokenizers.whitespace,
+  remote: {
+      url: "ajax_search.php?search=%QUERY&type=device&map=1",
+        filter: function (output) {
+            return $.map(output, function (item) {
+                return {
+                    name: item.name,
+                };
+            });
+        },
+      wildcard: "%QUERY"
+  }
+});
+var map_groups = new Bloodhound({
+  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
+  queryTokenizer: Bloodhound.tokenizers.whitespace,
+  remote: {
+      url: "ajax_search.php?search=%QUERY&type=group&map=1",
+        filter: function (output) {
+            return $.map(output, function (item) {
+                return {
+                    name: item.name,
+                };
+            });
+        },
+      wildcard: "%QUERY"
+  }
+});
+map_devices.initialize();
+map_groups.initialize();
+$('#target').typeahead({
+    hint: true,
+    highlight: true,
+    minLength: 1,
+    classNames: {
+        menu: 'typeahead-left'
     }
-]);
+},
+{
+  source: map_devices.ttAdapter(),
+  async: true,
+  displayKey: 'name',
+  valueKey: name,
+    templates: {
+        suggestion: Handlebars.compile('<p>&nbsp;{{name}}</p>')
+    }
+},
+{
+  source: map_groups.ttAdapter(),
+  async: true,
+  displayKey: 'name',
+  valueKey: name,
+    templates: {
+        suggestion: Handlebars.compile('<p>&nbsp;{{name}}</p>')
+    }
+});
 
 $('#map-submit').click('', function(e) {
     e.preventDefault();
diff --git a/html/includes/modal/new_alert_rule.inc.php b/html/includes/modal/new_alert_rule.inc.php
index 5165ba28fd..512ae398ae 100644
--- a/html/includes/modal/new_alert_rule.inc.php
+++ b/html/includes/modal/new_alert_rule.inc.php
@@ -206,33 +206,98 @@ $('#create-alert').on('show.bs.modal', function (event) {
 
 <script>
 var cache = {};
-$('#suggest').typeahead([
-    {
-      name: 'suggestion',
-      remote : '/ajax_rulesuggest.php?device_id=<?php echo $device['device_id'];?>&term=%QUERY',
-      template: '{{name}}',
-      valueKey:"name",
-      engine: Hogan
+var suggestions = new Bloodhound({
+  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
+  queryTokenizer: Bloodhound.tokenizers.whitespace,
+  remote: {
+      url: "ajax_rulesuggest.php?device_id=<?php echo $device['device_id'];?>&term=%QUERY",
+        filter: function (output) {
+            return $.map(output, function (item) {
+                return {
+                    name: item.name,
+                };
+            });
+        },
+      wildcard: "%QUERY"
+  }
+});
+suggestions.initialize();
+$('#suggest').typeahead({
+    hint: true,
+    highlight: true,
+    minLength: 1,
+    classNames: {
+        menu: 'typeahead-left'
     }
-]);
-$('#map-stub').typeahead([
-    {
-      name: 'map_devices',
-      remote : '/ajax_search.php?search=%QUERY&type=device&map=1',
-      header : '<h5><strong>&nbsp;Devices</strong></h5>',
-      template: '{{name}}',
-      valueKey:"name",
-      engine: Hogan
-    },
-    {
-      name: 'map_groups',
-      remote : '/ajax_search.php?search=%QUERY&type=group&map=1',
-      header : '<h5><strong>&nbsp;Groups</strong></h5>',
-      template: '{{name}}',
-      valueKey:"name",
-      engine: Hogan
+},
+{
+  source: suggestions.ttAdapter(),
+  async: true,
+  displayKey: 'name',
+  valueKey: name,
+    templates: {
+        suggestion: Handlebars.compile('<p>&nbsp;{{name}}</p>')
     }
-]);
+});
+
+var map_devices = new Bloodhound({
+  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
+  queryTokenizer: Bloodhound.tokenizers.whitespace,
+  remote: {
+      url: "ajax_search.php?search=%QUERY&type=device&map=1",
+        filter: function (output) {
+            return $.map(output, function (item) {
+                return {
+                    name: item.name,
+                };
+            });
+        },
+      wildcard: "%QUERY"
+  }
+});
+var map_groups = new Bloodhound({
+  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
+  queryTokenizer: Bloodhound.tokenizers.whitespace,
+  remote: {
+      url: "ajax_search.php?search=%QUERY&type=group&map=1",
+        filter: function (output) {
+            return $.map(output, function (item) {
+                return {
+                    name: item.name,
+                };
+            });
+        },
+      wildcard: "%QUERY"
+  }
+});
+map_devices.initialize();
+map_groups.initialize();
+$('#map-stub').typeahead({
+    hint: true,
+    highlight: true,
+    minLength: 1,
+    classNames: {
+        menu: 'typeahead-left'
+    }
+},
+{
+  source: map_devices.ttAdapter(),
+  async: true,
+  displayKey: 'name',
+  valueKey: name,
+    templates: {
+        suggestion: Handlebars.compile('<p>&nbsp;{{name}}</p>')
+    }
+},
+{
+  source: map_groups.ttAdapter(),
+  async: true,
+  displayKey: 'name',
+  valueKey: name,
+    templates: {
+        suggestion: Handlebars.compile('<p>&nbsp;{{name}}</p>')
+    }
+});
 
 $('#and, #or').click('', function(e) {
     e.preventDefault();
diff --git a/html/includes/modal/new_device_group.inc.php b/html/includes/modal/new_device_group.inc.php
index 8e8814541f..8b9490bc85 100644
--- a/html/includes/modal/new_device_group.inc.php
+++ b/html/includes/modal/new_device_group.inc.php
@@ -128,15 +128,39 @@ $('#create-group').on('show.bs.modal', function (event) {
     });
 });
 var cache = {};
-$('#suggest').typeahead([
-    {
-      name: 'suggestion',
-      remote : '/ajax_rulesuggest.php?device_id=-1&term=%QUERY',
-      template: '{{name}}',
-      valueKey:"name",
-      engine: Hogan
+var suggestions = new Bloodhound({
+  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
+  queryTokenizer: Bloodhound.tokenizers.whitespace,
+  remote: {
+      url: "ajax_rulesuggest.php?device_id=-1&term=%QUERY",
+        filter: function (output) {
+            return $.map(output, function (item) {
+                return {
+                    name: item.name,
+                };
+            });
+        },
+      wildcard: "%QUERY"
+  }
+});
+suggestions.initialize();
+$('#suggest').typeahead({
+    hint: true,
+    highlight: true,
+    minLength: 1,
+    classNames: {
+        menu: 'typeahead-left'
     }
-]);
+},
+{
+  source: suggestions.ttAdapter(),
+  async: true,
+  displayKey: 'name',
+  valueKey: name,
+    templates: {
+        suggestion: Handlebars.compile('<p>&nbsp;{{name}}</p>')
+    }
+});
 
 $('#and, #or').click('', function(e) {
     e.preventDefault();
diff --git a/html/includes/print-menubar.php b/html/includes/print-menubar.php
index c3da47f955..45bad13369 100644
--- a/html/includes/print-menubar.php
+++ b/html/includes/print-menubar.php
@@ -619,17 +619,27 @@ var bgp = new Bloodhound({
   }
 });
 
+if ($(window).width() < 768) {
+    var cssMenu = 'typeahead-left';
+} else {
+    var cssMenu = '';
+}
+
 devices.initialize();
 ports.initialize();
+bgp.initialize();
 $('#gsearch').typeahead({
     hint: true,
     highlight: true,
-    minLength: 1
+    minLength: 1,
+    classNames: {
+        menu: cssMenu
+    }
 },
 {
   source: devices.ttAdapter(),
   async: true,
-  disaply: name,
+  display: name,
   limit: 8,
     templates: {
         header: '<h5><strong>&nbsp;Devices</strong></h5>',
@@ -639,7 +649,7 @@ $('#gsearch').typeahead({
 {
   source: ports.ttAdapter(),
   async: true,
-  disaply: name,
+  display: name,
   limit: 8,
     templates: {
         header: '<h5><strong>&nbsp;Ports</strong></h5>',
@@ -649,7 +659,7 @@ $('#gsearch').typeahead({
 {
   source: bgp.ttAdapter(),
   async: true,
-  disaply: name,
+  display: name,
   limit: 8,
     templates: {
         header: '<h5><strong>&nbsp;BGP Sessions</strong></h5>',