Add autocomplete suggestions for tags and handles

css/obBase.css

@@ -1760,6 +1760,33 @@ removed because I don't think we're using the trick to hide the borders any more
   left: 168px;
 }
 
+.suggestionsList {
+  position: absolute;
+  width: 100%;
+  max-height: 155px;
+  background: #fff;
+  margin-top: 14px;
+  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 3px;
+  overflow-y: scroll;
+}
+
+.suggestionsList a {
+  display: block;
+  color: #000;
+  padding: 8px 20px;
+}
+.suggestionsList a:last-child {
+  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 3px;
+}
+.suggestionsList a:hover, .suggestionsList a:focus {
+  text-decoration: none;
+}
+.suggestionsList a:hover, .suggestionsList a.selected {
+  background-color: #efefef;
+}
+
 .txtField-bar,
 input[type="text"].txtField-bar {
   background: none;

js/config.js

@@ -30,6 +30,9 @@ module.exports = {
     restart:         'f'
   },
 
+  maxTagHistory: 1000,
+  maxHandleHistory: 1000,
+
   setTestnet: function(testNetBoolean){
     localStorage.setItem('testnet', testNetBoolean);
   }

js/templates/pageNav.html

@@ -164,6 +164,8 @@ <h3 class="margin0 marginTop25"><%= polyglot.t('Discover') %></h3>
         <%= polyglot.t('nav.testMode') %>
       </div>
       <% } %>
+
+      <div class="suggestionsList js-addressBarSuggestions"></div>
     </div>
   </div>
   <div class="ctrlGroup">

js/templates/pageNavSuggestionItem.html

@@ -0,0 +1 @@
+<a class="js-suggestion" href="<%= ob.itemUrl %>"><%= ob.itemTitle %></a>

js/views/homeVw.js

@@ -470,17 +470,21 @@ module.exports = baseVw.extend({
 
   searchItems: function(searchItemsText){
     if (searchItemsText){
+      var hashedItem = "#" + searchItemsText;
+
+      window.obEventBus.trigger('searchingText', hashedItem);
+
       this.searchItemsText = searchItemsText;
       this.clearItems();
       this.socketItemsID = "";
       this.socketSearchID = Math.random().toString(36).slice(2);
       this.socketView.search(this.socketSearchID, searchItemsText);
       this.setSocketTimeout();      
-      this.$el.find('.js-discoverHeading').html("#" + searchItemsText);
+      this.$el.find('.js-discoverHeading').html(hashedItem);
       this.$el.find('.js-loadingText').html(
         this.$el.find('.js-loadingText')
           .data('searchingText')
-          .replace('%{tag}', `<span class="btn-pill color-secondary">#${searchItemsText}</span>`)
+          .replace('%{tag}', `<span class="btn-pill color-secondary">${hashedItem}</span>`)
       );
       this.$el.find('.js-homeSearchItemsClear').removeClass('hide');
       this.setState('products', searchItemsText);