jQuery autocomplete Display two result lists

问题

I have a website using jQuery autocomplete for search suggestions, using customized display. Everything works fine so far.

No the problem is that the resulting items are devided into two types of suggestions, which I want to display as separate lists. I am aware of the Categories example, but this displays the results in one list, with intermitting captions.

I found this example that uses a second, hidden autocomplete to issue two search requests. This won't work as the results are coming from a single request in my case.

The closest I've got is by overriding _renderMenu to generate two ul lists for each category, wrapped as lis in the main ul for placing them next to each other using CSS, like this:

<ul id="ui-id-1"">
    <li>
        <ul>
            <li><b>Articles</b></li>
            <li class="ui-menu-item">Article 1</li>
            <li class="ui-menu-item">Article 2</li>
            <li class="ui-menu-item">Article 3</li>
        </ul>
    </li>
    <li>
        <ul>
            <li><b>Categories</b></li>
            <li class="ui-menu-item">Category 1</li>
            <li class="ui-menu-item">Category 2</li>
            <li class="ui-menu-item">Category 3</li>
        </ul>
    </li>
</ul>

However, in that case the navigation with cursors (down-arrow) doesn't work properly. When the menu pops up and down-arrow is pressed, an exception is thrown. If the mouse is first hovered over any item, the key navigation works within one list. Example here

Is there a way to enable the key navigation, and to make it "jump across" categories?

来源：https://stackoverflow.com/questions/30503172/jquery-autocomplete-display-two-result-lists