Autocomplete fails on sub page calls.... please help

Autocomplete fails on sub page calls.... please help

Hi Guys,

I'm currently testing the 1.3 autocomplete example. Everything works well on the initial page load but then the script fails on subsequent calls to other links on the page.

I'm currently using:

  1. $(document).bind('pageinit', function () {
  2.   $( "#autocomplete" ).on( "listviewbeforefilter", function ( e, data ) {
  3.     var $ul = $( this ),
  4.         $input = $( data.input ),
  5.         value = $input.val(),
  6.         html = "";
  7.         $ul.html( "" );
  8.         if ( value && value.length > 2 ) {
  9.           $ul.html( "<li><div class='ui-loader'><span class='ui-icon ui-icon-loading'></span></div></li>" );
  10.           $ul.listview( "refresh" );
  11.           $.ajax({
  12.             type: 'GET',
  13.             url: "jsonProducts.php",
  14.             dataType: "json",
  15.             data: {
  16.               q: $input.val()
  17.             }
  18.           })
  19.           .then( function ( response ) {
  20.             $.each( response, function ( i, val ) {
  21.               html += "<li><a href='" + val.link + "'><img src='" + val.img + "'><h2>" + val.title  + "</h2><p>" + val.desc + "</p></a></li>";
  22.             });
  23.             $ul.html( html );
  24.             $ul.listview( "refresh" );
  25.             $ul.trigger( "updatelayout");
  26.           });
  27.       }
  28.   });
  29. });
I've also tried

$(document).bind('pageinit', function () {
}

Any help would be great. I'm a newbie to jQuery Mobile

Cheers