2014-01-08 80 views
0

這是我的代碼,使JSON格式{"11":"xyz","14":"abc"}呈現紅寶石軌JSON jQuery的自動完成

def index 
    if params[:term] != nil 
     @products = Hash[current_user.search(params[:term]).map{|product| [product.id,product.name]}] 
     render json: @products.to_json 
    end 
    end 

這是我與自動完成更新結果的div #results的JavaScript。我想要的是使xyzabc鏈接與它相關聯的ID,但我無法弄清楚爲什麼我失去了ID我得到的所有結果爲xyz和abc`。

$(document).ready(function(){ 

    $("#search").autocomplete({ 
     //source: $('#search').data('autocomplete-source'), 
     source: "entities#index", 

     open: function(e, ui) { 
      var list = ''; 
      var results = $('ul.ui-autocomplete.ui-widget-content a'); 
      var ent_id = results.html() 
      results.each(function() { 
       list += '<a href= '+$(this).html()+'/'+ent_id+ '>' +$(this).html()+'</a>'+ '<br />'; 
      }); 
      $('#results').html(list); 
     } 
    }) 
}) 

現在上面的JavaScript代碼不能按要求工作,因爲我無法獲得ID。

感謝

+0

哪個自動完成jquery插件是這樣的?有很多 –

+0

http://api.jqueryui.com/autocomplete/ – user588324

回答

0

我發現了一個soulution它。

$(document).ready(function(){ 

    $("#search").autocomplete(
     { 
      source:"entities#index", 
      select: function(event, ui) { 
       $("#search").val(ui.item[1]); 
       $("#results").empty(); 
       $("#results").append('<a href= '+"entities"+'/'+ui.item[0]+ '>' +ui.item[1]+'</a>'); 
       return false; 
      } 

     }).data("ui-autocomplete")._renderItem = function(ul, item) { 
     return $("<li></li>") 
      .data("item.autocomplete", item) 
      .append("<a>" + item[1] + "</a>") 
      .appendTo(ul); 
    }; 

})