listviewbeforefilter / asynchronous AJAX request / update

listviewbeforefilter / asynchronous AJAX request / update

I use the following code for a listviewbeforeupdate with external data.

Some changes from the examples on this site:
- no page ID is identified as the javascript is only inserted dynamically with PHP subject to the page loaded).
- no reload if >3 letters

The latter adjustment should be a performance booster as the data-filter is quicker than multiple Ajax requests (at least in my case)

Everything works fine with a synchronous Ajax request. However with an asynchronous Ajax request (which I prefer as it is more user friendly) it may happen that the user has typed data after the Ajax request is completed. The data-filter is than only updated if more data is entered. 

What I would like to do is file a "data-filter update" request after the " $ul.trigger( "updatelayout");"

Live example: http://jetjesstrijk.x10.mx/btw/iphone2.php?pagina=zaaki example seach query C-77

  2. <script>
  3. $( document ).on( "pageinit", function() {
  4. $( "#autocomplete" ).on( "listviewbeforefilter", function ( e, data ) {
  5. var $ul = $( this ),
  6. $input = $( data.input ),
  7. value = $input.val(),
  8. html = "";
  9. if (value.length < 4 ) {
  10.         $ul.html( "" ); /*no longer use AJAX if > 3 letters */
  11.         }
  12. if ( value && value.length > 2 && value.length < 4 ) {
  13. $ul.html( "<li><div class='ui-loader'><span class='ui-icon ui-icon-loading'></span></div></li>" );
  14. $ul.listview( "refresh" );
  15.           var xmlhttp;
  16.           xmlhttp=new XMLHttpRequest();

  18.           xmlhttp.onreadystatechange=function()
  19.             {
  20.             if (xmlhttp.readyState==4)
  21.               {
  22.               html = xmlhttp.responseText;
  23.               $ul.html( html );
  24.   $ul.listview( "refresh" );
  25.   $ul.trigger( "updatelayout");
  26.               }
  27.             }
  28.           xmlhttp.open("GET","ajax.php?q="+value,true);
  29.           xmlhttp.send();
  30. }
  31. });
  32. });
  33. </script>