javascript - jQuery UI 自动完成 - 无结果消息

Question

如果没有结果，我尝试在下拉菜单中显示“无结果”消息。例如，如果我在文本字段中输入“ABCD”，并且没有匹配的实体，则会显示消息“无结果”。将显示。

在浏览 stackoverflow 寻找实现此目的的各种不同方法并尝试其中一些之后，我仍然无法让它工作。

未找到结果时，如何向下拉菜单添加“无结果”消息？

jQuery:

    $element.autocomplete({
        source: function (request, response) {            
            $.ajax({
                url: thUrl + thQS,
                type: "get",
                dataType: "json",
                cache: false,
                data: {
                    featureClass: "P",
                    style: "full",
                    maxRows: 12
                },
                success: function (data) {
                    response($.map(data, function (item) {
                        if (data.indexOf(item) === -1) {
                            return { label: "No Results." }
                        } else {
                            return {
                                label: item.Company + " (" + item.Symbol + ")",
                                value: item.Company
                            }
                        }
                    }));
                }
            });
        },
        minLength: that.options.minLength,
        select: function (event, ui) {
               reRenderGrid();
        }
    });

我尝试添加带有以下内容的 if() 语句，但没有成功。

if (data.length === 0) {
    // Do logic for empty result.
}

如果执行以下操作，我可以用文本“无结果”覆盖第一个条目...

if (data.indexOf(item) === 0) {
    return { 
        label: "No Results." 
}

...但是如果我设置 data.indexOf(item) === -1 什么也不会显示。

我最近尝试了以下操作，当没有数据时，它会进入循环，但是，“无结果”不会显示在菜单中:

   success: function (data) {
        response($.map(data, function (item) {
            return {
                label: item.Company + " (" + item.Symbol + ")",
                value: item.Company
            }
        }));
        if (data.length === 0) {
            label: "No Results."
        }
    }

我还尝试使用 Andrew Whitaker 的以下示例，但没有成功:

安德鲁惠特克的 fiddle :http://jsfiddle.net/J5rVP/128/

来源:http://blog.andrewawhitaker.com/2012/10/08/jqueryui-autocomplete-1-9/

Answer 1

if (!ui.content.length) {
    var noResult = { value:"",label:"No results found" };
    ui.content.push(noResult);
    //$("#message").text("No results found");
} 

fiddle

http://jsfiddle.net/J5rVP/129/

更新

将代码放在自动完成设置的末尾，紧接在 select: function (event, ui) {..}

    ..........
    minLength: that.options.minLength,
    select: function (event, ui) {
        reRenderGrid();
    },   //HERE - make sure to add the comma after your select
    response: function(event, ui) {
        if (!ui.content.length) {
            var noResult = { value:"",label:"No results found" };
            ui.content.push(noResult);
        }
    }
});