jquery mobile listview if there is no result -
i'm trying make search listview item.
the problem when results has not found item, want display message "no result found"...
so searched example here http://jsfiddle.net/6vu4r/1/ , doesn't work jqm version 1.4.2...
how do ? plz help~
this code
<ul data-role="listview" data-filter="true" data-filter-placeholder="search fruits..." data-inset="true"> <li><a href="#">apple</a></li> <li><a href="#">banana</a></li> <li><a href="#">cherry</a></li> <li><a href="#">cranberry</a></li> <li><a href="#">grape</a></li> <li><a href="#">orange</a></li> </ul>
jqm version 1.4.2 adds "ui-screen-hidden" class each li item in list. that's why stays hidden though function fadeout performed. logic correct, it's overridden class. quick , tested solution enforce visibility of using !important.
$(document).delegate('[data-role="page"]', 'pageinit', function () { var $listview = $(this).find('[data-role="listview"]'); $(this).delegate('input[data-type="search"]', 'keyup', function () { if ($listview.children(':visible').not('#no-results').length === 0) { $('#no-results').attr("style","display:block !important"); } else { $('#no-results').attr("style","display:none !important"); } }); });
notice used .attr function , explicitly added "style" attribute instead of using jquery css function because .css jquery function not !important reasons.
the other issue may ran "no results" message being shown when there results. due implemented delay in filtration process. delay protect performance when there thousands of items search.
you have wrap if statement delay process. such settimeout or delayed plugin in http://www.theloveofcode.com/jquery/delayed/
$(this).delegate('input[data-type="search"]', 'keyup', function () { settimeout(function(){ if ($listview.children(':visible').not('#no-results').length === 0) { $('#no-results').attr("style","display:block !important"); } else { $('#no-results').attr("style","display:none !important"); } }, 1000); });
good luck
Comments
Post a Comment