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

Question

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

javascriptjqueryjquery-uiautocompletejquery-autocomplete

30

如果在下拉菜单中没有结果，我想要显示一个“无结果”消息。例如，如果我在文本字段中输入“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的以下示例，但没有成功:

ANDREW WHITACKER的FIDDLE: http://jsfiddle.net/J5rVP/128/

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

- neuquen

4个回答

31

将函数修改为以下内容以检查数据的长度。

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
            }
        }));
    }
}

- neelmeg

1

但是用户可以选择“未找到匹配项”，这是错误的，我不明白为什么人们要这样做。 - RajnishCoder

1

在 select (events, ui) 函数中很容易修复这个问题。 - Marian Kmet

11

我的答案与@neelmeg和@Trever几乎相同，但我添加了一个额外的检查，因此用户将无法选择“没有结果”消息：

$(".my-textbox").autocomplete({
    minLength: 2,
    open: function () { $('.ui-autocomplete').css('z-index', 50); },
    source: function (request, response) {
        $.ajax({
            url: "/some-url",
            type: "POST",
            dataType: "json",
            data: { prefix: request.term, __RequestVerificationToken: token },
            success: function (data) {
                if (!data.length) {
                    var result = [{ label: "no results", value: response.term }];
                    response(result);
                }
                else {
                    response($.map(data, function (item) {
                        return { label: item.someLabel, value: item.someValue };
                    }))
                }
            }
        })
    },
    select: function (event, ui) {
        var label = ui.item.label;
            if (label === "no results") {
            // this prevents "no results" from being selected
            event.preventDefault();
        }
        else {
            /* do something with the selected result */
            var url = "some-url"
            window.location.href = url;
        }
    }
});

- Hooman Bahreini

1

对于我来说，这些消息出现的原因是：

MISSING CSS FILES O JQUERY UI

所以添加：

<link rel="stylesheet" href="jqueryui/themes/flick/jquery-ui.css" type="text/css" media="screen" />
<link rel="stylesheet" href="jqueryui/themes/flick/jquery.ui.theme.css" type="text/css" media="screen" />

解决了我的问题。

- andilabs

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Trevor · Accepted Answer

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

小提琴

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);
        }
    }
});