7

このFiddle demoが表示された場合、私が行ったものではありませんが、キーボードが下がって無効な要素を選択することを回避するにはどうすればよいですか? マウスは正常に動作しています (選択できません) が、キーボードを下に移動して選択すると、空の検索になります:-/

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

アンドリューの回答の代わりに、フォーカスを最初のアイテムにラップするダウンキーを保持したい場合は、フォーカスイベントを使用して、フォーカスできないアイテムがフォーカスされたときに最初のアイテムで mouseenter をトリガーできます。

以下のコードを focus プロパティとして追加するだけです

ワーキング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 に答える