0


I have a problem with jQuery autocomplete. On keydown, the selected item isn't "Item1", it would be the full unordered-list including span and the ul.

<ul>
  <li>
    <span>Items</span>
    <ul>
      <li><a>Item1</a></li>
      <li><a>Item2</a></li>
    </ul>
  </li>

  <li>
    <span>Cars</span>
    <ul>
      <li><a>Car1</a></li>
      <li><a>Car2</a></li>
    </ul>
  </li>

  <li>
    <span>Test</span>
    <ul>
      <li><a>Test1</a></li>
      <li><a>Test2</a></li>
    </ul>
  </li>
</ul>

Problem is:
On keydown -> menufocus: ui.item.data("ui-autocomplete-item") -> ui.item is undefined (in jquery.ui.js file)
ul-parameter in menufocus is full list of "Items" (<ul><li><a>Item1</a></li><li>...</li></ul>). What I want: On keydown select Item1, next Item2, next Car1, Car2 and so on...

_renderMenu:
$.each( items, function( index, item ) {
...
  if ( item.category != currentCategory ) {
      categoryIndex++;

      //Create "li"s for every category and append a span and the new ul to it.
      var myLi = "<li class='ui-autocomplete-category'><span class='ui-autocomplete-category-head'><i class='" + category.icon + "'></i> " + category.name + "</span></li>";

      var myLi = $(myLi).removeData("item.autocomplete-item");
      myLi.append("<ul class='ui-autocomplete-inner-ul' role='listbox' aria-labelledby='cat" + categoryIndex  + "' id='innerUlCat"+categoryIndex+"' aria-readonly='true'>");

      var myUl = ul.append(myLi);

        currentCategory = item.category;
  }

  var currentUl = $(ul).find("#innerUlCat"+categoryIndex) || ul;

  li = that._renderItemData( currentUl, item );
});


_renderItemData: return this._renderItemOwn( ul, item );


_renderItemOwn:
  return $( "<li></li>" )
    .data( "ui-autocomplete-item", item )
    .append( "<a class='ui-autocomplete-item'>" + item.label + "</a>" )
    .appendTo( ul );

In _renderItemOwn i added the data "ui-autocomplete-item" but it doesn't work.
Are there any solutions? Thank you!

9
  • Possible duplicate of jquery ui autocomplete combobox with categories Commented Oct 20, 2016 at 9:48
  • Not really but thank you. Do you know another solution? Commented Nov 9, 2016 at 14:17
  • Not sure I understand the problem Commented Nov 9, 2016 at 14:17
  • Normally the output html for autocomplete is like: <ul> <ul> <li><a>Test1</a></li> <li><a>Test2</a></li> </ul> If I want to navigate with arrow up and down, i can select "Test1" and "Test2" but in my case when i navigate down to select "Item1" (in my example) jquery thinks that i select the full ul includes: <ul> <li><a>Item1</a></li> <li><a>Item2</a></li> </ul> and that isn't right. You know what I mean? Commented Nov 9, 2016 at 14:22
  • 1
    Here is an example: jsfiddle.net/k8es0vr2 Commented Nov 9, 2016 at 15:00

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.