CODEWITHSUNDEEP
jquery-mobilejquery-mobile-listview
user3400080
user3400080

Reputation: 211

jquery mobile listview if there is no result

I'm trying to make a search listview item.

The problem is when the results has not found any item, i want to display a message like "No Result Found"...

So i searched a example here http://jsfiddle.net/6Vu4r/1/ , but it doesn't work for my JQM version 1.4.2...

How do i do that ? plz help~

this is my 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>

Upvotes: 0

Views: 498

Answers (1)

George Khouri
George Khouri

Reputation: 354

JQM version 1.4.2 adds "ui-screen-hidden" class to each li item in the list. That's why it stays hidden even though the function fadeOut is performed. The logic is correct, but it's overridden with this class. A quick and tested solution for this is to enforce the visibility of it 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 I used the .attr function and explicitly added the "style" attribute instead of using jquery css function because .css jquery function does not like !important for some reasons.

The other issue you may ran into is "No Results" message is being shown when there are results. This will be due to the implemented delay in the filtration process. This delay protect the performance when there are thousands of items to search.

You will have to wrap the if statement with a delay process. Such as setTimeout or a delayed plugin as 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

Upvotes: 1

Related Questions