jQuery UI autocomplete - Showing the results in separate lists
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&g开发者_开发技巧t;
<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.
Found this:
Multi-column lists
which was pretty easy to integrate with my implementation and allowed me to have what I wanted.
精彩评论