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.
}

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

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屋！