jQuery UI autocomplete - Showing the results in separate lists

Question

Hi,

I'd like to show my search results separated in many columns, that is, in separate lists like:

Item 1    Item 5    Item 9
Item 2    Item 6    Item 10
Item 3    Item 7    
Item 4    Item 8    

Following whatever way to indicate how many items should be shown per list before creating a new one.

I'm not clear about the formatItem() function in the autocomplete, so not sure it can be achieved there.

Any suggestion/guidance will be highly appreciated, including any other plugin/approach that allows me to get this result.

Thanks.

Edit:

<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 1; top: -0.899994px; left: 0px; display: block; position: relative; width: 150px;">
<li class="ui-menu-item" role="menuitem">
    <a class="ui-corner-all" tabindex="-1">Shanghai</a>
</li>
<li class="ui-menu-item" role="menuitem">
    <a class="ui-corner-all" tabindex="-1">Mumbai</a>
</li>
<li class="ui-menu-item" role="menuitem">
    <a class="ui-corner-all" tabindex="-1">Karachi</a>
</li>
<li class="ui-menu-item" role="menuitem">
    <a class="ui-corner-all" tabindex="-1">Delhi</a>
</li>
<li class="ui-menu-item" role="menuitem">
    <a class="ui-corner-all" tabindex="-1">Istanbul</a>
</li>
<li class="ui-menu-item" role="menuitem">
    <a class="ui-corner-all" tabindex="-1">São Paulo</a>
</li>
<li class="ui-menu-item" role="menuitem">
    <a class="ui-corner-all" tabindex="-1">Moscow</a>
</li>

This is the auto-generated HTML by the autocomplete, and I'd like to split it, say, every 3 items in a new list so every list becomes a column.

Maybe I'm thinking about a more complex than needed way and there's another, if that's the case, I'll appreciate any insight.

Thanks again.

Answer 1

Found this:

Multi-column lists

which was pretty easy to integrate with my implementation and allowed me to have what I wanted.