Filter Listview by items and dividers
-
16-04-2021 - |
Domanda
In jQueryMobile, I have written a data-role="listview"
component and I want to filter the data including its dividers. That is, when the user inputs some text to search, it may correspond to specific items or to dividers. In this last case, the whole divider and its subitems must be shown. The problem is that the default filtering mechanism ommits the dividers and I don't know how to properly redefine the filterCallback
function.
Does anyone know how to achieve this?
The code which I was trying is here.
Thanks in advance.
Soluzione
Well I have something:
JS
$("#myList").listview('option', 'filterCallback', function (text, searchValue) {
$("li[data-groupoptions]").removeClass('override-ui-screen-hidden');
$("li[data-groupoptions="+searchValue.toLowerCase()+"]").addClass('override-ui-screen-hidden');
return text.toLowerCase().indexOf( searchValue ) === -1;
});
CSS
.override-ui-screen-hidden {
display:block !important;
}
HTML
<div data-role="page">
<div data-role="content">
<ul id="myList" data-role="listview" data-filter="true">
<li data-role="list-divider" data-groupoptions="aaaa">AAAA</li>
<li data-groupoptions="aaaa"><a href="index.html">Adam Kinkaid</a></li>
<li data-groupoptions="aaaa"><a href="index.html">Alex Wickerham</a></li>
<li data-groupoptions="aaaa"><a href="index.html">Avery Johnson</a></li>
<li data-role="list-divider" data-groupoptions="bbbb">BBBB</li>
<li data-groupoptions="bbbb"><a href="index.html">Bob Cabot</a></li>
<li data-role="list-divider" data-groupoptions="cccc">CCCC</li>
<li data-groupoptions="cccc"><a href="index.html">Caleb Booth</a></li>
<li data-groupoptions="cccc"><a href="index.html">Christopher Adams</a></li>
<li data-groupoptions="cccc"><a href="index.html">Culver James</a></li>
</ul>
</div>
</div>
Altri suggerimenti
For including results matching dividers text, I put in each lines a hidden p wich contains the divider's text.
<li>
<a>
<p>Item</p>
<p style='display:none;'><?php echo $my_divider; ?></p>
</a>
</li>
Little improvement over Phill Pafford answer to match incomplete dividers names: change this:
$("li[data-groupoptions="+searchValue.toLowerCase()+"]").addClass('override-ui-screen-hidden');
with this:
$("li[data-groupoptions*="+searchValue.toLowerCase()+"]").addClass('override-ui-screen-hidden');
Now you can match 'AAAA' just typing 'AA'. Try it here: http://jsfiddle.net/qjJw3/