From cb88a07f8e65effcdc04b5db0413d04fa5e8a0ae Mon Sep 17 00:00:00 2001
From: Daniel Supernault <danielsupernault@gmail.com>
Date: Sat, 19 May 2018 21:12:09 -0600
Subject: [PATCH] Add searchform.js

---
 resources/assets/js/components/searchform.js | 55 ++++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 resources/assets/js/components/searchform.js

diff --git a/resources/assets/js/components/searchform.js b/resources/assets/js/components/searchform.js
new file mode 100644
index 00000000..e23843ed
--- /dev/null
+++ b/resources/assets/js/components/searchform.js
@@ -0,0 +1,55 @@
+$(document).ready(function() {
+
+  let queryEngine = new Bloodhound({
+    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
+    queryTokenizer: Bloodhound.tokenizers.whitespace,
+    remote: {
+      url: process.env.MIX_API_SEARCH + '/%QUERY',
+      wildcard: '%QUERY'
+    }
+  });
+
+  $('.search-form .search-form-input').typeahead(null, {
+    name: 'search',
+    display: 'value',
+    source: queryEngine,
+    limit: 20,
+    templates: {
+      empty: [
+        '<div class="alert alert-danger mb-0">',
+          'unable to find any matches',
+        '</div>'
+      ].join('\n'),
+      suggestion: function(data) {
+        let type = data.type;
+        let res = null;
+        switch(type) {
+          case 'hashtag':
+            res = '<a href="'+data.url+'">' +
+            '<div class="media d-flex align-items-center">' +
+            '<div class="mr-3 h4 text-muted">#</div>' +
+            '<div class="media-body text-truncate">' +
+            '<p class="mt-0 mb-0 font-weight-bold">'+data.value+'</p>' +
+            '<p class="text-muted mb-0">'+data.count+' posts</p>' +
+            '</div>' +
+            '</div>' +
+            '</a>';
+          break;
+          case 'profile':
+            res = '<a href="'+data.url+'">' +
+            '<div class="media d-flex align-items-center">' +
+            '<div class="mr-3 h4 text-muted"><span class="icon-user"></span></div>' +
+            '<div class="media-body text-truncate">' +
+            '<p class="mt-0 mb-0 font-weight-bold">'+data.name+'</p>' +
+            '<p class="text-muted mb-0">'+data.value+'</p>' +
+            '</div>' +
+            '</div>' +
+            '</a>';
+          break;
+        }
+        return res;
+      }
+    }
+  });
+
+});
\ No newline at end of file