开发者

jQuery UI autocomplete - Showing the results in separate lists

开发者 https://www.devze.com 2023-01-12 03:00 出处:网络
I\'d like to show my search results separated in many columns, that is, in separate lists like: Item 1Item 5Item 9

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.

0

精彩评论

暂无评论...
验证码 换一张
取 消