jQuery autocomplete should skip disabled element when using keyboard

Question

If you see this Fiddle demo, not done by me, how can I then avoid that the keyboard can go down and choose the disabled element? The mouse is working fine (not being able to select it) but I can go down with the keyboard and select it, resulting in an empty search :-/

The Fiddle demo is from this post, How to disable element in jQuery autocomplete list

jQuery code:

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

I also have the same problem... – Nithin Viswanathan Aug 27 '13 at 12:47 — Nithin Viswanathan, Aug 27 '13 at 12:47

score 4 · Accepted Answer · answered Aug 27 '13 at 14:17

4

Autocomplete "knows" to highlight items based on the presense of an <a> inside each li. You can disable keyboard selection of an event by just removing the anchor:

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

Example: http://jsfiddle.net/m6zvf/12/

answered Aug 27 '13 at 14:17

Andrew Whitaker

124,656
32
289
307

Why write var `$el = $("
")` and not just `var el = $("
")`? Is the $-sign an old habbit from other coding language or is it required elsewhere in jQuery?

Beauvais

Aug 28 '13 at 06:22

1

It's a convention that you can use if you want to designate that a variable contains a jQuery object. It's just convention, not required. See this [this question](http://stackoverflow.com/questions/205853/why-would-a-javascript-variable-start-with-a-dollar-sign) for more info. – Andrew Whitaker Aug 28 '13 at 12:54

4

This no longer seems to work with the new jQuery UI (1.11). Would love to see a solution for that. – ragulka Jul 09 '14 at 09:56

1

@ragulka: I don't have time to come up with an example now, but the "categories" example here http://jqueryui.com/autocomplete/#categories has an example of items in the list that cannot be selected. – Andrew Whitaker Jul 09 '14 at 12:43

@AndrewWhitaker: thanks, that's a good start - it seems that it's only a matter of using a different class for the non-selectable items. – ragulka Jul 09 '14 at 18:55

2

@ragulka surely this is a bug in jQuery UI 1.11? Having to explicitly set `this.widget().menu("option", "items", "> :not(.ui-state-disabled)");` seems odd to me. – Jayen May 07 '15 at 05:51

Rooster · Answer 2 · 2013-08-27T15:07:59.300

3

Alternatively to Andrews answer, if you want to preserve the down key wrapping the focus to the first item, you can use the focus event to trigger a mouseenter on the first item upon the unfocusable item coming into focus.

Just add the code below as a focus property

WORKING JS FIDDLE

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

edited Aug 27 '13 at 15:07

answered Aug 27 '13 at 14:57

Rooster

9,954
8
44
71

mouseenter dos not put value into an input so I trigger keydown: focus : function(event, ui) { if (ui.item === '') { event.preventDefault(); // skip first item and select second one var secondItem = $(event.currentTarget).children().eq(1); var e = jQuery.Event("keydown"); e.keyCode = 40; secondItem.trigger(e); } } – Volodymyr Krupach Mar 28 '18 at 08:39

jQuery autocomplete should skip disabled element when using keyboard

2 Answers2