I am creating an Android and iOS app using jQuery and Phonegap with a section intended to help users find map pins to locations in Japan. These pins are divided into categories and sub-categories (e.g. US Bases >> Army, Navy, Marine, or Air Force). I would like to provide users a screen with the ability to filter using the pins in a listview by the regular text input field AND a select/drop-down menu (see the image below; the relevant code is also provided at the end of this post).
A screenshot can be found here: http://ift.tt/1I7AYSR
I would LOVE users to be able to filter by EITHER keyword (text field) OR by category (drop-down). However, it APPEARS that data-input: will only allow for one for filter ID to be entered.
Do I have any options?? Something else that I've considered is making the filter use the text field and setting up the drop-down to automatically input t value of the selected option into that field to make it filter. Though I've found a variation using checkboxes and have successfully made the checkbox selection input into the text field, it doesn't initiate the filter...it just places the value in the field. My Javascript skills are just not at all at the level to switch the Javascript to a select menu and to solve the non-filtering problem.
Thanks in advance!
<div class="contactdetailstitle">SEARCH BY KEYWORD</div>
<!--Filter by text field-->
<form class="ui-filterable" style="margin-top:-25px;">
<input id="filterBasic-pinsword" data-type="search" placeholder="search by keyword" name="filterBasic-pinsword">
</form>
<div class="contactdetailstitle" style="margin-top:10px;">SEARCH BY CATEGORY</div>
<!--Filter by drop-down-->
<form style="margin-top:-6px; margin-bottom:25px;">
<select id="filterBasic-pinscat" data-native-menu="false" name="filterBasic-pinsword">
<option class="filterbycat" value=" ">Show All Categories</option>
<option value="Family Parks">Family Parks</option>
<option value="Theme Parks">Theme Parks</option>
</select>
</form>
<ul data-role="listview" data-autodividers="false" data-filter="true" data-input="#filterBasic-pinscat">
<li data-icon="false" data-filtertext="Family Parks"><a href="#">We Are Family Park</a></li>
<li data-icon="false" data-filtertext="Theme Parks"><a href="#">The Cosplay Park</a></li>
</ul>
Aucun commentaire:
Enregistrer un commentaire