Filter a list and requesting data via ajax <p>im new to javascript and phonegap and im sitting here the whole day and try to solve this problem.</p> <p>I have a list and i want to filter some data. And before i filter it, i want to download some data from a server and add it to the list. ( the list is local and if someone uses the search function, new data should pop up too).</p> <p>The idea is that i create the list with jquery and use the listviewbeforefilter-event to download the data from a server and add it to the list. Then jquery should filter the list.</p> <p>It works fine when i search filter for 2 chars.</p> <p>But this doesnt work as expected when i search for more than 2 chars. I receive the correct data from the server and it will be added to my list but the there is no more filtering in my original list. So i see my original list + the loaded data. Also the console.log("second") is shown first and then console.log("first). Somehow jquery/phonegap skips the .then part and then comes back to it.</p> <p>I tried to put the 3 lines ($ul.html( content );$ul.listview( "refresh" );$ul.trigger( "updatelayout");) below the second console.log and then the filter of my local data works but the data from the server wont be shown.</p> <p>I hope someone can help me with this weird problem.</p> <p>Heres my code for the listviewbeforefilter-event:</p> <pre><code> &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;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" /&gt; &lt;title&gt;Listview Autocomplete - jQuery Mobile Demos&lt;/title&gt; &lt;link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" /&gt; &lt;script src="cordova.js"&gt;&lt;/script&gt; &lt;script src="js/jquery-2.0.3.min.js"&gt;&lt;/script&gt; &lt;script src="js/jquery.mobile-1.3.2.min.js"&gt;&lt;/script&gt; &lt;script&gt; $( 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 &amp;&amp; value.length &gt; 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 += "&lt;li&gt;" + val + "&lt;/li&gt;"; }); content = content + html; $ul.html( content ); $ul.listview( "refresh" ); $ul.trigger( "updatelayout"); }); console.log("second"); } }); }); &lt;/script&gt; </code></pre> <p>and that is the body with the list:</p> <pre><code> &lt;/head&gt; &lt;body&gt; &lt;div data-role="page" id="myPage"&gt; &lt;div data-role="header" data-theme="f"&gt; &lt;h1&gt;Listview &lt;/h1&gt; &lt;/div&gt;&lt;!-- /header --&gt; &lt;div data-role="content"&gt; &lt;div class="content-primary"&gt; &lt;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"&gt; &lt;li data-role="list-divider"&gt;A&lt;/li&gt; &lt;li&gt;&lt;a href="index.html"&gt;Adam Kinkaid&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="index.html"&gt;Alex Wickerham&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="index.html"&gt;Avery Johnson&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt;&lt;!--/content-primary --&gt; &lt;/div&gt;&lt;!-- /content --&gt; &lt;script type="text/javascript" charset="utf-8"&gt; $(function(){ $( "#autocomplete2" ).hide(); }); &lt;/script&gt; &lt;ul id = "autocomplete2" data-role="listview" data-filter-theme="d"data-theme="d" data-divider-theme="d"&gt; &lt;li data-role="list-divider"&gt;A&lt;/li&gt; &lt;li&gt;&lt;a href="index.html"&gt;Adam Kinkaid&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="index.html"&gt;Alex Wickerham&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="index.html"&gt;Avery Johnson&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt;&lt;!-- /page --&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>