如何禁用jQuery自动完成列表中的元素 [英] How to disable element in jQuery autocomplete list

问题描述

是否可以在自动完成功能中禁用列表元素，从而使其无法选择(并变灰)?

Is it possible to disable a list element in an autocomplete, so it is not chooseable (and greyed out)?

我有这段代码，取自jQuery UI示例页面:

I have this code, taken from the jQuery UI example page:

HTML:

<input id="tags" />

jQuery:

$(function() {
  var availableTags = [
    "ActionScript",
    "AppleScript",
    "Asp",
    "BASIC",
    "C",
    "C++",
    "Clojure",
    "COBOL",
    "ColdFusion",
    "Erlang",
    "Fortran",
    "Groovy",
    "Haskell",
    "Java",
    "JavaScript",
    "Lisp",
    "Perl",
    "PHP",
    "Python",
    "Ruby",
    "Scala",
    "Scheme"
  ];
  $( "#tags" ).autocomplete({
    source: availableTags
  });
});

例如-如果列表中有3个以上的项目，是否可以禁用最后一个元素?

As an example - is it possible to disable the last element if there are more than 3 items in the list?

在我的真实代码中，我有一个AJAX请求，但我不想在自动完成框中显示超过20个结果，因此，如果超出此数目，它应该显示诸如请缩小搜索范围"之类的内容，并且禁用最后一个元素，因此它是不可选择的(但只能禁用最后一个元素).

In my real code, I have an AJAX request but I do not want to show more than 20 results in the autocomplete box, so if there are more than this, it should show something like "please narrow down your search" and disable the last element, so it is not chooseable (but only the last element should be disabled).

上面的代码带有Fiddle演示， http://jsfiddle.net/m6zvf/

The above code is here with a Fiddle demo, http://jsfiddle.net/m6zvf/

推荐答案

如果我理解正确，那么您想添加一个禁用选项，并显示一条消息，即在结果大于X时缩小搜索范围，为此，您会需要自定义response和渲染方法:

If I understand correctly you want to add a disabled option with the message saying to narrow down the search when the results are more than X, for that you'd need a custom response and render methods:

工作中的小提琴

Working fiddle

$(function () {
    $("#tags").autocomplete({
        source: availableTags,
        response: function (event, ui) {
            //Check if we have more than 3 results
            if (ui.content.length > 3) {
                //Remove all elements until there are only 3 remaining (the use of slice() was not supported)
                while (ui.content.length > 3) {
                    ui.content.pop();
                }
                //Add message
                ui.content.push({
                    'label': 'Please narrow down your search',
                     'value': ''
                });
            }
        }
    }).data("ui-autocomplete")._renderItem = function (ul, item) {
        //Add the .ui-state-disabled class and don't wrap in <a> if value is empty
        if(item.value ==''){
            return $('<li class="ui-state-disabled">'+item.label+'</li>').appendTo(ul);
        }else{
            return $("<li>")
            .append("<a>" + item.label + "</a>")
            .appendTo(ul);
        }
    };
});

您可以参考文档以获取有关响应方法的更多信息，_renderItem函数未记录，但我在示例之一的源代码中找到了它

You can refer to the documentation for more info on the response method, the _renderItem function is not documented but I found it in the source code of one of the examples

这篇关于如何禁用jQuery自动完成列表中的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！