jQuery几乎赢了我 - UI自动完成“数据未定义”

Question

jQuery几乎赢了我。我已经在StackOverflow的答案中看到了很多很多东西，但我无法找到问题的解决方案。

我在项目中使用jQuery UI Autocomplete，如果没有返回结果，我需要呈现默认消息。 我正在使用“_renderItem”，如下所示。

var autocompleteDir = $("#search");

autocompleteDir.autocomplete({
    source: function (request, response) {
        populate(request.term, response);

        result = $.ui.autocomplete.filter(result, request.term)

        var item = {};
        item.type = 'loading';
        item.label = "Loading..";
        item.value = "";

        result.unshift(item)

        response(result.slice(0, 10));
    }
});

autocompleteDir.data("ui-autocomplete")._renderItem = function (ul, item) {
    if (item.type === "loading") {
        return $('<li></li>')
            .data("ui-autocomplete-item", item)
            .append("<div style='text-align: center;'>" + item.label + "</div>")
            .appendTo(ul);
    }
};

以下是我在控制台上的内容：

Uncaught TypeError: Cannot read property 'type' of null
Uncaught TypeError: Cannot call method 'data' of undefined 

我正在使用jQuery 1.10.2和jQuery UI 1.10.3。有人有个好主意吗？

编辑1：

如果我在“来源”之前使用它：

response: function(event, ui){ 
                    if (ui.item.type === "loading"){
                        ui.content.push({label:"Loading",value:"Loading"})
                    }

                } 

我有以下错误：

Cannot read property 'type' of undefined 

如果您帮我解决了这个问题，我可以使用“回复”来格式化和设置我的“加载”和“无”结果吗？

编辑2

var populate = function(term, response) {
        $.getJSON(
            '<%= my_rails_path %>.json',
            {search: term},
            function(json) {
                  var result = [];
                  $.each(json, function(key, value) {
                    var item = {};
                    item.type = '';
                    item.label = value.name;
                    item.value = value.name;
                    result.push(item);
                  })

                  if (result.length == 0) {
                    var item = {};
                    item.type = "noResult";
                    item.label = "Create '" + term + "'"; 
                    item.value = term;
                    result.push(item)
                  }

                  response(result);
            }
        );  
};

编辑3

现在问题已经解决了，但是字面上显示了标签，但是我想要渲染它。查看代码，您将理解：

 response: function(event, ui){ 
          for(var i in ui.content){
            if (ui.content[i].type==="loading"){
                  ui.content[i] = {
                         label:"<div style='text-align: center;'>Loading</div>",
                        value:""
                                   }
            }
          }
 }

而是在ui的中间呈现“正在加载”，所有字符串都显示给用户（正在加载）。

Answer 1

您不需要使用_renderItem，因为jQuery提供了一个在搜索返回后和结果显示之前触发的事件，如果搜索返回为空，您可以修改该事件以返回默认值。请参阅response event。你可以这样做：

autocompleteDir.autocomplete({

    source: function (request, response) {
        populate(request.term, response);

        result = $.ui.autocomplete.filter(result, request.term)

        var item = {};
        item.type = 'loading';
        item.label = "Loading..";
        item.value = "";

        result.unshift(item)

        response(result.slice(0, 10));
    },

    response: function(event, ui){
        if(ui.content.length === 0){
            ui.content.push({label:"default",value:"value"}); /* modify to your liking */
        } 
    }
});

更改此技术应解决这两个问题。

修改

在第三次编辑中，如果要在页面的其他位置更改div的值，则需要自己在响应函数中执行此操作，而不是通过返回函数中的值。

response: function(event, ui){
    if(ui.content.length === 0){
        $('#id-of-div-to-change').text("Loading");
    } 
}