JQuery Mobile data filter in case of no result

Question

I am currently studying jQuery Mobile to develop a mobile version of a dashboard with tracking information. And what is a plan, is to use a simple unordered list with all orders, and people can click on the link that they want to know more about. Since this list can become quite large, it’s nice to have filtering that is easy to work with jQuery Mobile.

Just something like this:

<ul data-role="listview" data-filter="true"> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> <li><a href="#">Item 4</a></li> </ul> 

data-filter="true" takes care of displaying the search bar, and actually it works very well.

But my only problem is that when nothing is found, it simply does not display anything, and I would like there to be a little text that said something like "Sorry, no orders were found."

Does anyone know if this is possible using jQuery Mobile, or is it something that needs to be encoded from scratch?

Answer 1

 //wait to do event binding until the page is being initialized $(document).delegate('[data-role="page"]', 'pageinit', function () { //cache the list-view element for later use var $listview = $(this).find('[data-role="listview"]'); //delegate event binding since the search widget is added dynamically //bind to the `keyup` event so we can check the value of the input after the user types $(this).delegate('input[data-type="search"]', 'keyup', function () { //check to see if there are any visible list-items that are not the `#no-results` element if ($listview.children(':visible').not('#no-results').length === 0) { //if none are found then fadeIn the `#no-results` element $('#no-results').fadeIn(500); } else { //if results are found then fadeOut the `#no-results` element which has no effect if it already hidden $('#no-results').fadeOut(250); } }); });​ 

Here is a demo: http://jsfiddle.net/6Vu4r/1/

Answer 2

thanks

I use this code with the extension. I do not want to write this # no-result li every time.

 $(document).delegate('[data-role="page"]', 'pageinit', function() { var $listview = $(this).find('[data-role="listview"]'); $listview.append('<li id="no-results" style="display:none;">[No results found]</li>'); $listview.listview('refresh'); $(this).delegate('input[data-type="search"]', 'keyup', function() { if ($listview.children(':visible').not('#no-results').length === 0) { $('#no-results').fadeIn(500); } else { $('#no-results').fadeOut(250); } }); }); 

Answer 3

If you use @Jasper code in a list with auto-separators, you may find that hidden elements with no results create a separator. To avoid this, I used this code:

 if ($listview.children(':visible').not('#no-results').length === 0) { // if none are found then fadeIn the `#no-results` element $('#no-results').fadeIn(500); } else { // if results are found then fadeOut the `#no-results` element which // has no effect if it already hidden $('#no-results').fadeOut(250); $listview.children('.ui-li-divider:visible').not('#no-results').each(function() { if($(this).next("#no-results").length > 0) $(this).hide(); }); } 

If anyone has a better solution, share it.