1

私はjavascriptとphonegapが初めてで、一日中ここに座ってこの問題を解決しようとしています.

リストがあり、一部のデータをフィルタリングしたい。フィルタリングする前に、サーバーからデータをダウンロードしてリストに追加したいと思います。(リストはローカルであり、誰かが検索機能を使用すると、新しいデータもポップアップするはずです)。

アイデアは、jquery でリストを作成し、listviewbeforefilter-event を使用してサーバーからデータをダウンロードし、リストに追加することです。次に、jquery はリストをフィルタリングする必要があります。

2文字のフィルターを検索するとうまくいきます。

しかし、2文字以上を検索すると、これは期待どおりに機能しません。サーバーから正しいデータを受信し、リストに追加されますが、元のリストにはフィルタリングがありません。だから、元のリストとロードされたデータが表示されます。また、console.log("second") が最初に表示され、次に console.log("first) が表示されます。どういうわけか、jquery/phonegap は .then 部分をスキップしてから戻ってきます。

3 行 ($ul.html( content );$ul.listview( "refresh" );$ul.trigger( "updatelayout");) を 2 番目の console.log の下に配置してから、ローカルのフィルターを配置しようとしましたデータは機能しますが、サーバーからのデータは表示されません。

誰かがこの奇妙な問題で私を助けてくれることを願っています.

listviewbeforefilter-event のコードは次のとおりです。

 <html>
 <head>
    <meta charset="utf-8">
     <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <title>Listview Autocomplete - jQuery Mobile Demos</title>
     <link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" />
    <script src="cordova.js"></script>
    <script src="js/jquery-2.0.3.min.js"></script>
     <script src="js/jquery.mobile-1.3.2.min.js"></script>

 <script>
    $( document ).on( "pageinit", "#myPage", function() {
    $( "#autocomplete" ).on( "listviewbeforefilter", function ( e, data ) {
        // this is a second list which is a backup. It is needed because after each search the original list is flooded with old entries.
        var content = document.getElementById("autocomplete2").innerHTML;
        var requestdata = "";
        var $ul =  $( this );
            $input = $( data.input ),
            value = $input.val();
        //  ajax call returns cities with at least 3 characters
        if ( value && value.length > 2 ) {
            $.ajax({
                url: "http://gd.geobytes.com/AutoCompleteCity",
                dataType: "jsonp",
                crossDomain: true,
                data: {
                    q: $input.val()
                }
            })

            // The response is saved in html which i append to the original content
            .then( function ( response ) {
                var html = "";
                console.log("first");
                $.each( response, function ( i, val ) {
                    html += "<li>" + val + "</li>";
                });
                content = content + html;
                $ul.html( content );
                $ul.listview( "refresh" );
                $ul.trigger( "updatelayout");

            });
            console.log("second");

            }

        });
    });
 </script>

そして、それはリストを含む本体です:

     </head>
     <body>
     <div data-role="page" id="myPage">

        <div data-role="header" data-theme="f">
            <h1>Listview </h1>
        </div><!-- /header -->

        <div data-role="content">

            <div class="content-primary">
            <ul id = "autocomplete" data-role="listview" data-filter="true" data-filter-placeholder="Search people..." data-filter-theme="d"data-theme="d" data-divider-theme="d">

            <li data-role="list-divider">A</li>
            <li><a href="index.html">Adam Kinkaid</a></li>
            <li><a href="index.html">Alex Wickerham</a></li>
            <li><a href="index.html">Avery Johnson</a></li>
        </ul>

            </div><!--/content-primary -->

        </div><!-- /content -->
        <script type="text/javascript" charset="utf-8">
           $(function(){
                $( "#autocomplete2" ).hide();
                });
               </script>
        <ul id = "autocomplete2" data-role="listview"  data-filter-theme="d"data-theme="d" data-divider-theme="d">

        <li data-role="list-divider">A</li>
        <li><a href="index.html">Adam Kinkaid</a></li>
        <li><a href="index.html">Alex Wickerham</a></li>
        <li><a href="index.html">Avery Johnson</a></li>

    </ul>


     </div><!-- /page -->

     </body>
     </html>
4

1 に答える 1

0

問題を修正しました。コードを変更しました：

     content = content + html;
     $ul.html( content );

に

  $ul.append( html);

私はカスタムフィルターを作成し、フィルターが開始された後に.thenが常に呼び出されることを認識しました。このメソッド listviewbeforefilter は、フィルタリングが開始される前にすべてを実行する必要があるため、これは非常に奇妙です。ajax は非常に時間がかかり、スキップされますが、後で応答を受信したときに .then メソッドに戻るためだと思います。おそらく async:false が役立つと思いましたが、違います。

したがって、基本的にはローカルデータをフィルタリングし、不要なリストを非表示にして、受信したデータをリストに追加します。

于 2013-09-22T23:47:03.823 に答える