7

如果你看到这个Fiddle 演示，不是我做的，那么我怎样才能避免键盘向下并选择禁用的元素？鼠标工作正常（无法选择它）但我可以用键盘向下并选择它，导致搜索为空：-/

Fiddle 演示来自这篇文章，How to disable element in jQuery autocomplete list

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,
    response: function (event, ui) {
        if (ui.content.length > 3) {
            while (ui.content.length > 3) {
                ui.content.pop();
            }
            ui.content.push({
                'label': 'Please narrow down your search',
                    'value': ''
            });
        }
    }
}).data("ui-autocomplete")._renderItem = function (ul, item) {
    return $("<li " + (item.value == '' ? 'class="ui-state-disabled"' : '') + ">")
        .append("<a>" + item.label + "</a>")
        .appendTo(ul);
};
});
4

2 回答 2

4

自动完成“知道”根据<a>每个li. 您可以通过删除锚点来禁用事件的键盘选择：

.data("ui-autocomplete")._renderItem = function (ul, item) {
        var $el = $("<li>");
        if (item.value === '') {
            $el.addClass("ui-state-disabled")
               .text(item.label);

        } else {
            $el.append("<a>" + item.label + "</a>");
        }

        return $el.appendTo(ul);
    };

示例：http: //jsfiddle.net/m6zvf/12/

于 2013-08-27T14:17:21.540 回答
3

作为 Andrews 答案的替代方案，如果您想保留将焦点包裹到第一项的向下键，您可以使用 focus 事件在无法聚焦的项目成为焦点时触发第一项上的 mouseenter。

只需将下面的代码添加为焦点属性

工作 JS 小提琴

    focus: function(event, ui){
        var curr = $(event.currentTarget).find('a.ui-state-focus');
        if(curr.parent().hasClass('ui-state-disabled'))
        {
            event.preventDefault(); 
            curr.parent().siblings().first().children('a').mouseenter();  
        }
    }
于 2013-08-27T14:57:06.767 回答