Selection of multiple tags separated by ',' works for hardcoded array of tags.

app/assets/javascripts/application.js

@@ -14,6 +14,7 @@
 //= require jquery_ujs
 //= require jquery-ui/widgets/datepicker
 //= require jquery-ui/i18n/datepicker-es
+//= require jquery-ui/widgets/autocomplete
 //= require jquery-fileupload/basic
 //= require foundation
 //= require turbolinks
@@ -63,6 +64,7 @@
 //= require documentable
 //= require tree_navigator
 //= require custom
+//= require tag_autocomplete
 
 var initialize_modules = function() {
   App.Comments.initialize();
@@ -97,6 +99,7 @@ var initialize_modules = function() {
   App.WatchFormChanges.initialize();
   App.TreeNavigator.initialize();
   App.Documentable.initialize();
+  App.TagAutocomplete.initialize();
 };
 
 $(function(){

app/assets/javascripts/tag_autocomplete.js.coffee

@@ -0,0 +1,29 @@
+App.TagAutocomplete =
+
+  split: ( val ) ->
+    return (val.split( /,\s*/ ))
+
+  extractLast: ( term ) ->
+    return (App.TagAutocomplete.split( term ).pop())
+
+  init_autocomplete: ->
+    $('.js-tag-list').autocomplete
+      source: (request, response) ->
+        response( $.ui.autocomplete.filter(["Arbol", "Becerro", "Caracol"], App.TagAutocomplete.extractLast( request.term ) ) );
+      minLength: 0,
+      search: ->
+        console.log(this.value);
+        console.log(App.TagAutocomplete.extractLast( this.value ));
+        App.TagAutocomplete.extractLast( this.value );
+      focus: ->
+        return false;
+      select: ( event, ui ) -> (
+        terms = App.TagAutocomplete.split( this.value );
+        terms.pop();
+        terms.push( ui.item.value );
+        terms.push( "" );
+        this.value = terms.join( ", " );
+        return false;);
+
+  initialize: ->
+    App.TagAutocomplete.init_autocomplete();

app/assets/stylesheets/application.scss

@@ -16,4 +16,6 @@
 @import 'annotator_overrides';
 @import 'jquery-ui/datepicker';
 @import 'datepicker_overrides';
+@import 'jquery-ui/autocomplete';
+@import 'autocomplete_overrides';
 @import 'documentable';

app/assets/stylesheets/autocomplete_overrides.scss

@@ -0,0 +1,41 @@
+// Overrides styles of jquery-ui/autocomplete
+//
+
+/* Autocomplete
+----------------------------------*/
+.ui-autocomplete { position: absolute; cursor: default; }
+.ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; }
+
+/* workarounds */
+* html .ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */
+
+/* Menu
+----------------------------------*/
+.ui-menu {
+  list-style:none;
+  padding: 0px 5px;
+  margin: 0;
+  display:block;
+  /*width:227px;*/
+  background: white;
+  border: 1px solid $border;
+}
+.ui-menu .ui-menu {
+  margin-top: -3px;
+}
+.ui-menu .ui-menu-item {
+  margin:0;
+  padding: 0;
+  width: 200px;
+}
+.ui-menu .ui-menu-item a {
+  /*  text-decoration:none;
+    display:block;*/
+  padding:.2em .4em;
+  /*  line-height:1.5;
+    zoom:1;*/
+}
+.ui-menu .ui-menu-item a.ui-state-hover,
+.ui-menu .ui-menu-item a.ui-state-active {
+  margin: -1px;
+}

app/views/debates/_form.html.erb

@@ -22,7 +22,8 @@
       <%= f.text_field :tag_list, value: @debate.tag_list.to_s,
                         label: false,
                         placeholder: t("debates.form.tags_placeholder"),
-                        aria: {describedby: "tag-list-help-text"} %>
+                        aria: {describedby: "tag-list-help-text"},
+                        data: {js_url: tags_search_path}%>
     </div>
     <div class="small-12 column">
       <% if @debate.new_record? %>

config/routes.rb

@@ -168,6 +168,10 @@ Rails.application.routes.draw do
     resource :letter, controller: "letter", only: [:new, :create, :show, :edit, :update]
   end
   
+  namespace :tags do
+    get :search
+  end
+
 
   namespace :admin do
     root to: "dashboard#index"