autocomplete done

app/assets/javascripts/desktop/journal_pages.js.erb

@@ -229,6 +229,8 @@ orbitDesktop.prototype.initializeJournalPapers = function(target,url,cache){ //
         })
       }
       bindHandlers();
+      
+      
     }
     this.initializeJournalPapers.coAuthorformCallback = function(data){
         if(data.success){

app/assets/javascripts/orbitdesktop.js

@@ -6,6 +6,7 @@
 //container=true is the area where the view will be loaded
 //load = true is used to load the list element by default
 //response-type = "json"|"script"|"xml|html" default is json 
+//autocomplete-list = "listname" an array from which autocomplete will be attached to its respective input or textarea
 
 
 $.extend($.expr[':'], {
@@ -172,6 +173,7 @@ var orbitDesktop = function(dom){
         })
       }
     });
+
     var $widget_fn = $('.widget_fn'),$fn_des = $('.fn_des');
     $widget_fn.hover(function(){
       var fn_name = $(this).find('img').attr('alt'),nth = $(this).parents('.d_cate').index(),des_left = $('.dock_child').eq(nth).width();
@@ -181,6 +183,45 @@ var orbitDesktop = function(dom){
       $(this).removeClass('thmc1');
       $fn_des.stop(true, true).fadeOut();
     });
+
+    var split = function( val ) {
+        return val.split( /,\s*/ );
+    }
+    var extractLast = function( term ) {
+        return split( term ).pop();
+    }
+    var autocompleteListName = null;
+    $("body").on("keydown","*[autocomplete-list]", function( event ) {
+        autocompleteListName = $(this).attr("autocomplete-list");
+        if ( event.keyCode === $.ui.keyCode.TAB &&
+            $( this ).data( "autocomplete" ).menu.active ) {
+          event.preventDefault();
+        }
+        $(this).autocomplete({
+            minLength: 0,
+            source: function( request, response ) {
+                // delegate back to autocomplete, but extract the last term
+                response( $.ui.autocomplete.filter(
+                    window.o[o.data_method][autocompleteListName], extractLast( request.term ) ) );
+            },
+            focus: function() {
+                // prevent value inserted on focus
+                return false;
+            },
+            select: function( event, ui ) {
+                var terms = split( this.value );
+                // remove the current input
+                terms.pop();
+                // add the selected item
+                terms.push( ui.item.value );
+                // add placeholder to get the comma-and-space at the end
+                terms.push( "" );
+                this.value = terms.join( ", " );
+                return false;
+            }
+        })
+    })
+
   };
   this.sub_menu_item = function(dom){
       if(!dom.hasClass('active')){

app/assets/stylesheets/desktop.css

@@ -6,6 +6,7 @@
  *= require bootstrap
  *= require bootstrap-orbit
  *= require jquery.miniColors
+ *= require jquery-ui
  *= require font-awesome
  *= require desktopmain
  *= require desktopmedia

app/views/desktop/journal_pages/_form.html.erb

@@ -52,7 +52,7 @@
             <%= f.text_area :paper_title, size: "20x2", placeholder: "Paper Title", class: "s_grid_6 s_grid"%>
           </li>
           <li class="s_grid_row">
-            <%= f.text_field :journal_title, size: "20", placeholder: "Journal Title", class: "s_grid_6 s_grid"%>
+            <%= f.text_field :journal_title, size: "20", placeholder: "Journal Title", class: "s_grid_6 s_grid", "autocomplete-list" => "journal_title_autocomplete_list" %>
             <span class="icon-plus input_append"></span>
           </li>
           <li class="s_grid_row">
@@ -113,7 +113,7 @@
       <div class="s_grid_con s_form">
         <ul>
           <li class="s_grid_row">
-            <%= f.text_area :authors, size: "20x2", placeholder: "Authors", class: "s_grid_6 s_grid"%>
+            <%= f.text_area :authors, size: "20x2", placeholder: "Authors", class: "s_grid_6 s_grid", "autocomplete-list" => "coauthor_autocomplete_list"%>
             <span class="icon-plus input_append"></span>
           </li>
           <li class="s_grid_row">
@@ -207,6 +207,11 @@
     </div>
   </div>
 </div>
-<script>
+<script type="text/javascript">
-  orbitDesktop.initializeJournals.prototype.autocomplete = { "journal_title" : <%= @journal_candidate.to_json.html_safe   %>, "co_authors_candidate" : <%= @co_author_candidate.to_json.html_safe  %> }
+  orbitDesktop.prototype.initializeJournalPapers.journal_title_autocomplete_list = <%= @journal_candidate.to_json.html_safe   %>; 
+  orbitDesktop.prototype.initializeJournalPapers.coauthor_autocomplete_list = <%= @co_author_candidate.to_json.html_safe  %>;
 </script>
+
+
+
+