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

前端之家收集整理的这篇文章主要介绍了如何在jQuery自动完成列表中禁用元素前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
是否可以在自动完成中禁用列表元素,因此它不可选择(并且显示为灰色)?

我有这个代码,取自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/

解决方法

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

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

有关响应方法的更多信息,请参阅documentation,_renderItem函数未记录,但我在其中一个示例的源代码中找到了它

原文链接:https://www.f2er.com/jquery/180581.html

猜你在找的jQuery相关文章