We have multiple filterable inputs on a page, looking to show list when a filterable listview has focus.
What we want to achieve is:
1. when user clicks the listview search, shows a small set of choices (5 or 10)
2. when the user starts entering text in the search box, we use the filertablebeforefilter event to narrow down the choices and refresh the li entries.
HTML:
<input type="hidden" id="jobtemp" name="jobtemp" value="" />
<input type="hidden" id="jobcode" name="jobcode" />
<ul id="jobautocomplete" data-filter-reveal="true" data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="Find a Job ..." data-filter-theme="a">
<li><a href="#">Job 1</a>
</li>
<li><a href="#">Job 2</a></li>
</ul>
<input type="hidden" id="phasetemp" name="phasetemp" value="" />
<input type="hidden" id="phasecode" name="phasecode" />
<ul id="phaseautocomplete" data-filter-reveal="true" data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="Find a Cost Code ..." data-filter-theme="a">
<li><a href="#">Phase 1</a>
</li>
<li><a href="#">Phase 2</a></li>
</ul>
Code:
$("#jobautocomplete").on("filterablebeforefilter", function (e, data) {
// .. ajax to refresh the <li> values in the filterable listview
}
$("#phaseautocomplete").on("filterablebeforefilter", function (e, data) {
// .. ajax to refresh the <li> values in the filterable listview, also filter based on the value in the jobautocomplete text field.
}
We've tried something similiar to this
but couldn't figure out a way that allowed us to only show the listview that has focus (not all filterable listviews).