2

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

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

私が試していたコードはここにあります。

前もって感謝します。

4

3 に答える 3

3

仕切りのテキストに一致する結果を含めるために、各行に仕切りのテキストを含む非表示のピッチを配置します。

<li>
    <a>
        <p>Item</p>
        <p style='display:none;'><?php echo $my_divider; ?></p>
    </a>
</li>
于 2012-05-18T14:33:00.927 に答える
2

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

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>
于 2012-01-16T18:54:01.533 に答える
0

不完全な仕切りの名前に一致するPhillPaffordの回答に対する少しの改善：これを変更します：

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

これとともに：

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

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

于 2013-03-05T03:42:34.690 に答える