CODEWITHSUNDEEP
jquery-mobile
grigno
grigno

Reputation: 3198

Filter listview using a select

With jquery mobile its possible filter a listview using a select control?

this is my example: Fiddle

Selecting an option the listview must be filtered.

Upvotes: 2

Views: 1771

Answers (2)

Ashis Kumar
Ashis Kumar

Reputation: 6544

You can set the filter to true data-filter="true" and then manually hide it. 

#myContent .ui-listview-filter {
    display: none;
}

On change of select, just put the selected value into the text field and trigger keyup event.

$('#select-choice-1').change(function() {
    $('#myContent .ui-listview-filter input.ui-input-text').val($(this).val()).trigger('keyup');
});

Try this http://jsfiddle.net/gdEKd/9/

Upvotes: 5

visnu
visnu

Reputation: 935

See updated demo : jsfiddle 

<ul data-role="listview">
   <li data-filtertext="de" class="de"><a href=#>Audi</a></li>
   <li data-filtertext="de" class="de"><a href=#>BMW</a></li>
   <li data-filtertext="it" class="it"><a href=#>Ferrari</a></li>
   <li data-filtertext="it" class="it"><a href=#>Lamborghini</a></li>
   <li data-filtertext="it" class="it"><a href=#>Maserati</a></li>
</ul>

$('#select-choice-1').change(function(){
    var value = $('#select-choice-1').val();
    $("ul").find("li").hide()
    $("ul").find("li."+value).show();
  });

Upvotes: 2

Related Questions