2

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 中间呈现“正在加载”，所有字符串都显示给用户（正在加载）。

4

1 回答 1

1

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

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");
    } 
}
于 2013-09-26T02:17:11.823 回答