在Ruby on Rails 3中使用模型作爲jQuery自動完成的源代碼

我使用簡單的jQuery進行自動完成，當我在本地定義jQuery中的選項列表時，它工作正常。下面的代碼（幾乎從jQuery網站直）：在Ruby on Rails 3中使用模型作爲jQuery自動完成的源代碼

<script> 
jQuery(function() { 
    var easy = [ 
     "one", 
     "two", 
     "three", 
    ]; 
    jQuery("#tags").autocomplete({ 
     source: easy 
    }); 
}); 
</script> 



<div class="demo"> 

<div class="ui-widget"> 
<label for="tags">Tags: </label> 
<input id="tags"> 
</div>

我想要做的是通過在模型我呼籲用戶，其中有一個在entires：名稱和：BUSINESS_NAME屬性，並使用該模型中的條目用於選項。我可以將這些數據傳遞給我的jQuery變量，還是以另一種方式完成？

來源

2011-05-05 FattRyan

首先你需要兩個部分來做到這一點：

客戶端（jQuery UI的自動完成）
後端（提供數據）

你不能直接查詢來自你的javascript代碼的模型，查詢必須通過一個控制器完成。

首先，看看jQuery自動完成文檔和示例here。

您所看到的是，結果請求將具有一個名爲「term」的參數，這是您開始在輸入字段中輸入的內容。

因此請求看起來像

http://yourdomain.com/yourcontroller?term=whatyoutype

什麼jQuery的希望是包含在JSON格式像哈希值的數組：將自動完成列表值顯示：

[{"label": "Formatted Name to Show in List for first match", "value": 1}, {"label": "Formatted Name for Match #2", "value": 2}]

標籤：當您選擇一個條目（例如組合框）時，是否使用該值

我建議創建一個名爲UsersController控制器，因此請求將看起來像

http://yourdomain.com/users?term=whatyoutype

class UsersController < ApplicationController 


    def index 

    # general model 
    @users = User 

    # check if we should filter results 
    if params.has_key?(:term) && !params[:term].empty? 
     q = "#{params[:term]}%" 
     @users = @users.where("name LIKE ? OR business_name LIKE ?", q, q) 
    end 

    # only 20 entries 
    @users = @users.limit(20) 


    # respond in the right format 
    respond_to do |format| 
     # normal html layout 
     format.html 
     # json for jquery 
     format.json do 
     # make an array 
     @users.map! do |u| 
      { 
      :label => u.name + "/" + u.business_name, 
      :value => u.id 
      } 
     end 
     render :json => @users 
     end 
    end 
    end 
end

現在，您可以啓用自動完成，如：

jQuery("#tags").autocomplete({ 
    source: '<%= users_path(:format => :json) %>' 
});

users_path(:format => :json)會產生像/users.json?term=yoursearchterm

路徑我希望這會對你有用

來源

2011-05-10 21:02:29 sled

在Ruby on Rails 3中使用模型作爲jQuery自動完成的源代碼

回答

相關問題