如何在jQuery自动完成列表中禁用元素

Question

是否可以在自动完成中禁用列表元素,因此它不可选择(并且显示为灰色)？

我有这个代码,取自jQuery UI示例页面:

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个项目,是否可以禁用最后一个元素？

在我的真实代码中,我有一个AJAX请求但我不想在自动完成框中显示超过20个结果,所以如果有更多,它应该显示类似"请缩小搜索范围"并禁用最后一个元素,因此它不可选择(但只应禁用最后一个元素).

上面的代码在这里有一个小提琴演示,http://jsfiddle.net/m6zvf/

Answer 1

如果我理解正确你想要添加一个禁用选项,并在结果超过X时说明要缩小搜索范围,那么你需要一个自定义response和渲染方法:

工作小提琴

$(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函数未记录,但我在其中一个示例的源代码中找到了它