JQuery autocomplete should skip disconnected item when using keyboard

Question

If you see this Fiddle demo not made by me, how can I avoid that the keyboard can go down and select a disabled item? The mouse works fine (not being able to select it), but I can go down using the keyboard and select it, which will lead to an empty search: - /

Fiddle script from this post How to disable an item 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); }; }); 

Answer 1

Autocomplete “knows” to highlight elements based on the presence of an <a> inside each li . You can disable the keyboard selection for an event by simply 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/

Answer 2

As an alternative to Andrews, answer, if you want to keep the lower key that brings focus to the first element, you can use the focus event to trigger the center of the mouse in the first element when the undeveloped element comes into focus.

Just add the code below as the focus property

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