limit number of visible list items.

[Joe Sharples]

I have a dynamic list.
The list items only show when the user has started typing in the datafilter.
I want to limit the amount of list items shown to just show the top 5.

I DONT want to limit the amount of items the service returns.
I just want to limit the amount that are visible.

Cheers

[Bob Fludder]

Hope this helps. There's a few things you'll need to do.

1. on the list (may be the list item ??) you'll need to add in more properties: attribute is data-filter-reveal and value of true. This means that the list items will only appear once someone has started inputting something. You can also use something like:

   var input1 = Apperyio("name_of_your_list").prev(".ui-filterable").find("input");
   var onInputKeyUp = function(event) {
   // do something (event.KeyCode == 13 for enter key
   };
   input1.on("keyup", onInputKeyUp);

   Put that in a page load event...

   You may also want to try using your own filter:

   $.mobile.document.one("filterablecreate", "#id of your list", function() {
   $("#id of your list").filterable("option", "filterCallback", function(index, searchValue) {
   //do selections.. NB return a true if you want the line hidden, false to display it.
   });
   });

   Good luck.

[Joe Sharples]

Hi Bob,

Thank you.

I already have it so that the list items only show when the user has started typing in the datafilter. I used the data-filter-reveal attribute.

To be clear, I want to limit the amount of listitems shown on search to only 5 items at a time.
I'm not sure if your second solution is what I'm looking to achieve. if it is, how do I create my own filter with it set to only show 5 items?

[Joe Sharples]

I tried using slice()

pre
$("mylistitemName").slice(5).hide();
/pre

but this didnt work.

[Bob Fludder]

I think you'll need to create your own filter. Needs to go in a customer javascript and run before the page with the list loads. I have one that loads some global variables etc and have it in there. Called it a_globals.

In there you put the

$.mobile.document.one("filterablecreate", "#id of your list", function() {
$("#id of your list").filterable("option", "filterCallback", function(index, searchValue) {

//initialise counter - since it reads all list items then if index = 0 this will be the first time

if(index === 0) noHidden = 0;

//In here you go the normal filtering (or make up your own). Result is true if to be //hidden
var hidden = false;
var text = ($('#screenname_fieldname_' + index).val());
if(text !== searchValue) hidden = true; // or whatever
if(hidden) noHidden++;

//now if more than 5 - hide them as well
if(noHidden 5 hidden = true;

return hidden;
});
});

Anyway something like that. My javascript is a bit average so excuse any coding errors. Also make sure to define noHidden as a global variable or it could be in local/session storage.

There's lots more in the web - search for "filterablecreate" - jquery mobile.

Good luck

[Joe Sharples]

Hi Bob,

Thank you for your help but I'm still quite confused by this. I've also looked here:

http://stackoverflow.com/questions/16...

But I'm struggling to understand how to implement this.
Any help from appery team?

[Egor Kotov6832188]

Hello Joe,

Only Apperyio object works with component name, but jquery does not, thus
$("mylistitemName")
will not return you event you list component, cause such selector is wrong from css the point, thus no result was seen.

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

[Joe Sharples]

Thanks Egor,

This slice method work. But i have changed my list, I now have 2 dynamic list items mapped to separate arrays. I only want to slice the first list item, not the whole list.

I tried:
$("[name=NameOfMyListItem] li").slice(5).hide()

but this didnt work.

[Egor Kotov6832188]

Joe,

you can try only next selcetor:

$(".screenName_listItem").slice(5).hide();

In my case with page called Screen3 and list item called mobilelistitem_95
$(".Screen3_mobilelistitem_95").slice(5).hide();

[Joe Sharples]

Thanks Egor