Implemented auto complete using selectize

Gemfile

@@ -9,6 +9,8 @@ gem 'jdbc-mysql',      '5.1.28',   :platform => :jruby
 gem 'pg_search'
 #
 gem 'acts-as-taggable-on'
+# Implementing autocomplete
+gem "selectize-rails"
 # Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
 gem 'rails', '4.1.8'
 

Gemfile.lock

@@ -230,6 +230,7 @@ GEM
     sdoc (0.4.1)
       json (~> 1.7, >= 1.7.7)
       rdoc (~> 4.0)
+    selectize-rails (0.12.4)
     simplecov (0.12.0)
       docile (~> 1.1.0)
       json (>= 1.8, < 3)
@@ -308,6 +309,7 @@ DEPENDENCIES
   rubocop
   sass-rails (>= 3.2)
   sdoc (~> 0.4.0)
+  selectize-rails
   simplecov
   spring
   truncate_html (~> 0.9.3)

app/assets/javascripts/application.js

@@ -11,6 +11,7 @@
 // about supported directives.
 //
 //= require jquery
+//= require selectize
 //= require jquery.turbolinks
 //= require jquery_ujs
 //= require turbolinks

app/assets/stylesheets/application.css.scss

@@ -11,6 +11,8 @@
  * file per style scope.
  *
  *= require_self
+ *= require selectize
+ *= require selectize.default
  *= require froala_editor.min.css
  *= require froala_style.min.css
  *= require plugins/char_counter.min.css

app/controllers/new_threads_controller.rb

@@ -10,10 +10,10 @@ def index
 
   def list
     if params[:tag]
-    @new_threads = NewThread.tagged_with(params[:tag])
+      @new_threads = NewThread.tagged_with(params[:tag])
     else
-    @new_threads = NewThread.paginate(page: params[:page], per_page: 10)
-                            .order('id DESC')
+      @new_threads = NewThread.paginate(page: params[:page], per_page: 10)
+                              .order('id DESC')
     end
   end
 
@@ -32,7 +32,7 @@ def show
     # the request path will not match the new_thread_path, and we should do
     # a 301 redirect that uses the current friendly id.
     if request.path != new_thread_path(@new_thread)
-      return redirect_to @new_thread, status: :moved_permanently
+      redirect_to @new_thread, status: :moved_permanently
     end
   end
 
@@ -111,7 +111,8 @@ def destroy
   # Never trust parameters from the scary internet,
   # only allow the white list through.
   def new_thread_params
-    params.require(:new_thread).permit(:title, :description, :user_id,:tag_list)
+    params.require(:new_thread).permit(:title, :description, :user_id,
+                                       :tag_list)
   end
 
   def friendly_url

app/models/new_thread.rb

@@ -1,5 +1,4 @@
 class NewThread < ActiveRecord::Base
-
   acts_as_taggable # Alias for acts_as_taggable_on :tags
 
   extend FriendlyId

app/views/new_threads/_form2.html.erb

@@ -22,7 +22,7 @@
 
 <div class="form-group">
   <%= f.label :tag_list, "Tags (separated by commas)" , class: 'col-xs-2 control-label'%>
-  <div class='col-xs-11'><%= f.text_field :tag_list,class: 'form-control'%></div>
+  <div class='col-xs-11'><%= f.text_field :tag_list, id: 'tags'%></div>
 </div>
 
   <%= f.hidden_field :user_id, :value => current_user.id %>
@@ -31,3 +31,17 @@
     <div class='col-xs-3'><%= f.submit (action_name == 'new' ? 'Post' : 'Update'), class: 'btn btn-primary btn-lg' %></div>
   </div>
 <% end %>
+
+<script>
+$('#tags').selectize({
+    plugins: ['remove_button'],
+    delimiter: ',',
+    persist: false,
+    create: function(input) {
+        return {
+            value: input,
+            text: input
+        }
+    }
+});
+</script>

app/views/new_threads/list.html.erb

@@ -23,7 +23,8 @@
             </div>
 
             <div class="thread-foot">
-              <%=raw new_thread.tag_list.map {|t| link_to t,tag_path(t)}.join(', ') %>
+              <span class="glyphicon glyphicon-tags"></span>
+              <%=raw new_thread.tag_list.map {|t| link_to t,tag_path(t)}.join(', ').html_safe %>
             </div>
 
             <div class="thread-foot">

app/views/new_threads/show.html.erb

@@ -26,6 +26,9 @@
           </div>
 
           <div class="thread-foot">
+              <span class="glyphicon glyphicon-tags"></span>
+             <%=raw @new_thread.tag_list.map {|t| link_to t,tag_path(t)}.join(', ') %>
+          </div>
 
             <% if user_signed_in? %>
               <% if @new_thread.user.id == current_user.id %>
@@ -53,8 +56,6 @@
               <% end %>
             </div>
 
-          </div>
-
         </div>
       </div>
 

db/migrate/20170127162438_add_missing_unique_indices.acts_as_taggable_on_engine.rb

@@ -6,8 +6,8 @@ def self.up
     remove_index :taggings, :tag_id if index_exists?(:taggings, :tag_id)
     remove_index :taggings, [:taggable_id, :taggable_type, :context]
     add_index :taggings,
-              [:tag_id, :taggable_id, :taggable_type, :context, :tagger_id, :tagger_type],
-              unique: true, name: 'taggings_idx'
+              [:tag_id, :taggable_id, :taggable_type, :context, :tagger_id,
+               :tagger_type], unique: true, name: 'taggings_idx'
   end
 
   def self.down

db/migrate/20170127162441_change_collation_for_tag_names.acts_as_taggable_on_engine.rb

@@ -4,7 +4,8 @@
 class ChangeCollationForTagNames < ActiveRecord::Migration
   def up
     if ActsAsTaggableOn::Utils.using_mysql?
-      execute("ALTER TABLE tags MODIFY name varchar(255) CHARACTER SET utf8 COLLATE utf8_bin;")
+      execute('ALTER TABLE tags MODIFY name varchar(255) CHARACTER
+      			SET utf8 COLLATE utf8_bin;')
     end
   end
 end

db/migrate/20170127162442_add_missing_indexes.acts_as_taggable_on_engine.rb

@@ -8,6 +8,7 @@ def change
     add_index :taggings, :context
 
     add_index :taggings, [:tagger_id, :tagger_type]
-    add_index :taggings, [:taggable_id, :taggable_type, :tagger_id, :context], name: 'taggings_idy'
+    add_index :taggings, [:taggable_id, :taggable_type, :tagger_id,
+                          :context], name: 'taggings_idy'
   end
 end