Forum | Appery.io

Hi,

can somebody help me with which event i should attach

$("[name=mobilelist_91] li").slice(5).hide()

to?

If I run this after the list is populated, it limits the whole list to the top 5 list items.

As Joe described above, i'd like to dynamically limit the top 5 items returned as the user types in the filter box.

Hello Paul,

Please add the custom CSS below to hide list items with the index 5:
pre[name="myList"] li:nth-child(n+6){
display:none;
}/pre
myList - name of the list component

Hi Serhii,

I am using a filter on the list with

data-filter-reveal = true

both of the above solutions reduce the list to 5 entries before the user types in the filter box.

so with the following dataset

Afghanistan
Albania
Algeria
Australia
Austria
Argentina
Bahrain
Barbados
Belarus
Belgium
Belize
Benin
Chad
Chile
China
Columbia
Croatia
Cuba

only the following are available in the list

Afghanistan
Albania
Algeria
Australia
Austria

I would like the full list to remain so that if the user types

"a", only the first five entries beginning with A are shown
"b", only the first five entries beginning with B are shown
"c", only the first five entries beginning with C are shown etc

I've worked around the problem by changing the way the page scolls, but when you have time, it would be great to get a solution for this for future projects.

thanks

You can add the listener to the event "keyup" to the search box and check if the input field is empty - remove the CSS class from the list component and add it if the input is not clear. And use the CSS above in that class