1

これは、jQuery Mobile のデモ ページに示されているオートコンプリートの例です。

<!DOCTYPE html> 
<html> 
<head> 
    <title>Page Title</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
    <script>

    </script>
</head> 

<body> 
<div data-role="page" style="max-height:240px; min-height:240px;">
    <div data-role="content" > 
        <ul data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Search fruits..." data-inset="true">
            <li><a href="#">Apple</a></li>
            <li><a href="#">Banana</a></li>
            <li><a href="#">Cherry</a></li>
            <li><a href="#">Cranberry</a></li>
            <li><a href="#">Grape</a></li>
            <li><a href="#">Orange</a></li>
        </ul>
    </div>
</div>
</body>
</html>

これは完全にうまく機能します。新しいリスト項目を追加すると、その項目は非表示ではなく表示されます。したがって、テキスト入力ボックスと、1 つの項目 (追加した新しい項目) を含むリストビューがあります。

これが私が追加したコードです

$(document).ready(function(){
    $('ul').append('<li><a href="index.html">Sample</a></li>');
    $('ul').listview('refresh');
});

検索を実行してテキスト入力フィールドをクリアすると、新しく追加されたアイテムが非表示になります。動的に追加されたデータがユーザーに表示されないようにする方法。（私の場合は約50エントリ）

4

1 に答える 1

3

追加した LI アイテム用に生成された HTML コードを確認したところ、LI にクラスui-screen-hiddenクラスが設定されていないことがわかりました。他のすべての LI アイテムにはこのセットがありました。

だから私はここに示すようにコードを修正しました

$(document).ready(function(){
  $('ul').append('<li class="ui-screen-hidden"><a href="#">Sample</a></li>');
  $('ul').listview('refresh');
});
于 2013-05-06T08:38:00.223 に答える