JQuery-Ui 自动完成不显示结果

Question

我正在尝试显示经理列表的自动完成结果。我有以下代码：

Application.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);
                }
            });
        }
    });

项目控制器

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

Routes.rb

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

_form.html.erb

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

以下代码很好，我不知道在 firebug 中没有收到任何错误。但是，当我尝试输入经理姓名（例如詹姆斯·约翰逊）时，该姓名不会出现。我还尝试将整个函数放入 _form.html.erb 并将其包装在标签中，但这不起作用。是否知道为什么会发生这种情况

所以我设法修复了我的错误，这是由于 Jquery core 和 Jquery ui 的顺序造成的。

我已经列出了经理的名单。在下图中。

从图像中可以看出，当我输入“Arm”时，它会显示整个经理列表，当它应该显示“Deshawn Armstrong”。 有关

我知道这很可能与我下面的项目控制器项目控制器

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功能正常工作，您就可以：

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

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

根据您的新信息，您需要在您的自动完成。

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