过滤列表并通过 ajax 请求数据

Filter a list and requesting data via ajax

本文关键字：ajax 请求 数据 列表 过滤      更新时间：2023-09-26

我是javascript和Phonegap的新手，我整天坐在这里试图解决这个问题。

我有一个列表，我想过滤一些数据。在过滤它之前，我想从服务器下载一些数据并将其添加到列表中。（列表是本地的，如果有人使用搜索功能，新数据也应该弹出）。

这个想法是我用jquery创建列表，并使用listviewbeforefilter-event从服务器下载数据并将其添加到列表中。然后jquery应该过滤列表。

当我搜索过滤器以查找 2 个字符时，它工作正常。

但是当我搜索超过 2 个字符时，这并没有按预期工作。我从服务器收到正确的数据，它将被添加到我的列表中，但在我的原始列表中没有更多的过滤。所以我看到了我的原始列表+加载的数据。此外，首先显示控制台.log（"第二"），然后显示控制台.log（"第一）。不知何故，jquery/phonegap跳过了.then部分，然后回到它。

我试图把3行（$ul.html（内容）;$ul.listview（"刷新"）;$ul.trigger（"updatelayout"）;)在第二个控制台下方.log然后我的本地数据的过滤器有效，但不会显示来自服务器的数据。

我希望有人可以帮助我解决这个奇怪的问题。

这是我在过滤器事件之前的列表视图的代码：

 <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>

我解决了这个问题。我更改了代码：

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

自 

  $ul.append( html);

我做了一个自定义过滤器，并认识到 .then 总是在过滤器开始后被称为 U。这真的很奇怪，因为此方法listviewbeforefilter应该在过滤开始之前完成所有操作。我想这是因为 ajax 需要很长时间并且会被跳过，但稍后在收到响应时回到 .then 方法。我想也许 async：false 会有所帮助，但没有。

所以基本上它会过滤我的本地数据并隐藏不需要的列表，然后我将接收到的数据附加到列表中。

相关文章：