アイテムと仕切りによるフィルターリストビュー

Question

jquerymobileで、私はaを書いた data-role="listview" コンポーネントとその仕切りを含むデータをフィルタリングしたい。つまり、ユーザーが検索にテキストを入力すると、特定のアイテムまたは仕切りに対応する場合があります。この最後のケースでは、仕切り全体とそのサブアイテムを表示する必要があります。問題は、デフォルトのフィルタリングメカニズムが仕切りを除外し、私が適切に再定義する方法がわからないことです filterCallback 関数。

誰かがこれを達成する方法を知っていますか？

私が試していたコードはそうです ここ.

前もって感謝します。

Answer 1

まあ私は何かを持っています：

• http://jsfiddle.net/dckdp/24/

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>

Answer 2

仕切りのテキストに一致する結果を含めるために、各行に、ディバイダーのテキストが含まれている隠されたp wichを入れます。

<li>
    <a>
        <p>Item</p>
        <p style='display:none;'><?php echo $my_divider; ?></p>
    </a>
</li>

Answer 3

不完全な仕切りの名前を一致させるためのPhill Paffordの回答に対するほとんど改善：これを変更します：

$("li[data-groupoptions="+searchValue.toLowerCase()+"]").addClass('override-ui-screen-hidden');

これとともに：

$("li[data-groupoptions*="+searchValue.toLowerCase()+"]").addClass('override-ui-screen-hidden');

これで、「aaaa」を「AA」と入力するだけで一致させることができます。ここで試してみてください： http://jsfiddle.net/qjjw3/