JQuery Autocomplete: Get current focus <li>

Autocomplete JQuery fires a focus event when the user translates or otherwise selects one of their options <li>. In this case, I want to turn to the <li>one that is currently focused, but I cannot figure out how to choose it. At the moment I have:

focus: function( event, ui ) {
  var target = event.currentTarget
  alert($(target).html())
}

But this returns the entire list of <li>s, not just the currently focused list . I tried other event methods like event.delegateTarget and event.target, but without success. Is there any other way to get a focused element?

+5
source share
2 answers

You need:

  • , .
  • li, ( li a ui-state-focus

    focus: function (event, ui) {
        var menu = $(this).data("uiAutocomplete").menu.element,
        focused = menu.find("li:has(a.ui-state-focus)");
        // focused is the focused `li`
    }
    

: http://jsfiddle.net/J5rVP/43/

+7

- :

focus: function(event, ui) {
    $(".ui-autocomplete li").removeClass("ui-state-hover");
    $(".ui-autocomplete").find("li:has(a.ui-state-focus)").addClass("ui-state-hover");
}
+1

All Articles