Replace typeahead, working registrar selection

app/assets/javascripts/app.js.coffee

@@ -1,19 +1,20 @@
-$(".js-registrars-typeahead").typeahead
+registrarSource = new Bloodhound(
-  source: (query, process) ->
+  datumTokenizer: (d) ->
-    $.get "/admin/registrars/search", {query: query}, (data) ->
+    Bloodhound.tokenizers.whitespace d.display_key
-      map = {}
-      registrars = []
 
-      $.each data, (i, registrar) ->
+  queryTokenizer: Bloodhound.tokenizers.whitespace
-        map[registrar.id] = registrar
+  remote: "/admin/registrars/search?q=%QUERY"
-        registrars.push registrar.display
+)
-
-      process registrars
-  updater: (item) ->
-    $('input[name="domain[registrar_id]"]').val()
-
-$(".js-contacts-typeahead").typeahead
-  source: (query, process) ->
-    $.get "/admin/contacts/search", {query: query}, (data) ->
-      process data
 
+registrarSource.initialize()
+$(".js-registrars-typeahead").typeahead(
+  highlight: true,
+  hint: false
+,
+  displayKey: "display_key"
+  source: registrarSource.ttAdapter()
+).on('typeahead:selected', (e, obj) ->
+  $('input[name="domain[registrar_id]"]').val obj.id
+  $('.js-registrar-selected').removeClass('hidden')
+  $('.js-registrar-unselected').addClass('hidden')
+)

app/assets/javascripts/application.js.coffee

@@ -4,7 +4,7 @@
 #= require bootstrap-sprockets
 #= require nprogress
 #= require nprogress-turbolinks
-#= require bootstrap3-typeahead.min
+#= require typeahead.bundle.min
 #= require_tree .
 
 NProgress.configure

app/assets/stylesheets/application.css.scss

@@ -3,4 +3,5 @@
 @import "nprogress";
 @import "nprogress-bootstrap";
 @import "bootstrap-ext";
+@import "typeaheadjs";
 @import "app";

app/controllers/admin/registrars_controller.rb

@@ -1,5 +1,5 @@
 class Admin::RegistrarsController < ApplicationController
   def search
-    render json: Registrar.search_by_query(params[:query])
+    render json: Registrar.search_by_query(params[:q])
   end
 end

app/models/registrar.rb

@@ -11,7 +11,7 @@ class Registrar < ActiveRecord::Base
   class << self
     def search_by_query(query)
       res = Registrar.search(name_or_reg_no_cont: query).result
-      res.reduce([]) { |o, v| o << { id: v[:id], display: "#{v[:name]} (#{v[:reg_no]})" } }
+      res.reduce([]) { |o, v| o << { id: v[:id], display_key: "#{v[:name]} (#{v[:reg_no]})" } }
     end
   end
 end

app/views/admin/domains/new.haml

@@ -10,9 +10,11 @@
         = f.label :period
         = f.text_field(:period, class: 'form-control')
     .col-md-6
-      .form-group
+      .form-group.has-feedback
         = f.label :registrar
-        = f.text_field(:registrar, class: 'form-control js-registrars-typeahead', placeholder: t('shared.registrar_name'), autocomplete: 'off')
+        = f.text_field(:registrar, class: 'form-control js-typeahead js-registrars-typeahead', placeholder: t('shared.registrar_name'), autocomplete: 'off')
+        %span.glyphicon.glyphicon-remove.form-control-feedback.js-registrar-unselected
+        %span.glyphicon.glyphicon-ok.form-control-feedback.js-registrar-selected.hidden
         = f.hidden_field(:registrar_id)
       .form-group
         = f.label :owner_contact

vendor/assets/stylesheets/typeaheadjs.css

@@ -0,0 +1,46 @@
+.twitter-typeahead {
+     width: 100%;
+     position: relative;
+ }
+
+.tt-dropdown-menu {
+    width: 100%;
+    min-width: 160px;
+    margin-top: 2px;
+    padding: 5px 0;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    *border-right-width: 2px;
+    *border-bottom-width: 2px;
+    -webkit-border-radius: 6px;
+    -moz-border-radius: 6px;
+    border-radius: 6px;
+    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+    -webkit-background-clip: padding-box;
+    -moz-background-clip: padding;
+    background-clip: padding-box;
+}
+.tt-suggestion {
+    display: block;
+    padding: 3px 20px;
+}
+.twitter-typeahead .tt-suggestion.tt-cursor {
+    color: #fff;
+    background-color: #0081c2;
+    background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
+    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
+    background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
+    background-image: -o-linear-gradient(top, #0088cc, #0077b3);
+    background-image: linear-gradient(to bottom, #0088cc, #0077b3);
+    background-repeat: repeat-x;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
+}
+.tt-suggestion.tt-cursor a {
+    color: #fff;
+}
+.tt-suggestion p {
+    margin: 0;
+}