JQuery-Ui 自動完成不顯示結果

Question

我正在嘗試顯示經理列表的自動完成結果。 我有以下代碼：

應用程序.js

 function log(message) {
        $( "<div/>" ).text( message ).prependTo("#log");
    }

   $("#managers").autocomplete({
        source : function(request, response) {
            $.ajax({
                url : "/managerlist",
                dataType : "json",
                data : {
                    style : "full",
                    maxRows : 12,
                    term : request.term
                },
                success : function(data) {
                    var results = [];
                    $.each(data, function(i, item) {
                        var itemToAdd = {
                            value : item,
                            label : item
                        };
                        results.push(itemToAdd);
                    });
                    return response(results);
                }
            });
        }
    });

項目 controller

def manager_list 
  list=Project.all.map{|i|i.manager_user_id} 
  arr= [].concat(list.sort{|a,b| a[0]<=>b[0]}).to_json 
  render :json =>arr
end

路由.rb

  match '/managerlist' => 'projects#manager_user_id'

_form.html.erb

<p>
        <%= f.label :manager_user_id %><br />
        <input id="managers" />
    </p>

以下代碼很好，我在 firebug 中沒有收到任何錯誤。 但是，當我嘗試輸入經理姓名時，例如 James Johnson，該名稱不會出現。 我還嘗試將整個 function 放入 _form.html.erb 並將其包裝在標簽中，但這不起作用。 有什么想法為什么會這樣

所以我設法修復了我的錯誤，這是因為 Jquery 內核和 Jquery ui 的排序。

我已經列出了經理。 在下圖中。

從圖像中可以看出，當我輸入“Arm”時，它會顯示整個經理列表，而當它應該顯示“Deshawn Armstrong”時。 我知道這很可能與我的項目 controller 有關

項目 controller

def manager_list 
  list=Project.all.map{|i|i.manager_user_id} 
  arr= [].concat(list.sort{|a,b| a[0]<=>b[0]}).to_json 
  render :json =>arr
end

Answer 1

檢查 Firebug 控制台中的響應並確保字符串采用正確的 json 格式以進行自動完成。

看來您只是返回一個數組。 .ajax中的dataType設置不會轉換為json ； 它只是期待這種格式回來。 如果您沒有從url: "/managerlist"發回 json ，這可能是問題所在。

實際上，如果您的ajax function 工作正常，您可以：

return response(JSON.stringify({ results: results }));

JSON.stringify 的JSON.stringify示例： http://jsfiddle.net/xKaqL/

根據您的新信息，您需要在自動完成中添加一個minLength選項。

$("#managers").autocomplete({
    minLength: 2,   // 2 or whatever you want
   // rest of your code