jQuery UI自动完成-没有结果消息 [英] jQuery UI autocomplete- no results message

问题描述

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

I'm trying to have a "No Results" message appear in the dropdown menu if there are no results. So for instance, if I type in "ABCD" into the text field, and there is no entity that matches, the message "No Results." will be displayed.

在研究了stackoverflow寻找完成此任务的各种不同方法并尝试了其中的几种方法之后，我仍然无法使它起作用.

After looking through stackoverflow for the various different ways of accomplishing this, and trying a few of them, I still can't get it to work.

找不到结果时如何在下拉菜单中添加无结果"消息?

How can I add a "No Results" message to the dropdown menu when no results are found?

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()语句，但这没用.

I have tried adding an if() statement with the following but that didn't work.

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

如果执行以下操作，我就可以用文本"No Result"覆盖第一个条目...

I am able to overwrite the first entry with the text "No Result" if I do the following...

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

...但是如果我设置data.indexOf(item) === -1，则不会显示任何内容.

...but if I set data.indexOf(item) === -1 nothing shows up.

我最近尝试了以下方法，当没有数据时，它进入循环，但是，菜单中未显示无结果":

I just recently tried the following, and when there is no data, it goes into the loop, however, "No Results" is not being displayed in the menu:

   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)的以下示例，但运气不佳:

I have also attempted to use the below example from Andrew Whitaker with no luck:

安德鲁·怀卡克的地盘: http://jsfiddle.net/J5rVP/128/

ANDREW WHITACKER'S FIDDLE: http://jsfiddle.net/J5rVP/128/

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

推荐答案

像这样修改函数以检查数据长度.

Modify the function like this to check for length of data.

success: function (data) {
    if(!data.length){
        var result = [
            {
                label: 'No matches found', 
                value: response.term
            }
        ];
        response(result);
    }
    else{
        // normal response
        response($.map(data, function (item) {
            return {
                label: item.CompanyName + " (" + item.SymbolName + ")",
                value: item.CompanyName
            }
        }));
    }
}

这篇关于jQuery UI自动完成-没有结果消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！