jquery mobile : Uncaught TypeError: Cannot read property 'abort' of undefined error in ajax call

Question

hello i have made a site with jquery mobile and i am using auto complete of jquery mobile i want abort previous request of ajax but i face the error of Cannot read property 'abort' of undefined here is my code :

<div id="myPage">  
  <ul id="autocomplete" data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="Find a city..." data-filter-theme="a"></ul>                  
</div>

and here is js code:

<script type="text/javascript">
   var xhr ;
   $(document).on( "pageinit", function() {
       autoComplete();
   });
   function autoComplete(){ 
$( ".ui-input-text" ).on( "keyup", function ( e, data ) {   
       var $ul = $('#autocomplete'),
           $input = $(this),
           value = $input.val(),
           html = "";
    $ul.html( "" );
    if ( value && value.length > 1 ) {
        $ul.html( "<li><div class='ui-loader'><span class='ui-icon ui-icon-loading'></span></div></li>" );
        $ul.listview( "refresh" );
        console.log(xhr);
        if(xhr && xhr.readystate != 4 &&  typeof xhr !== 'undefined'){
            xhr.abort();
        }

        xhr = $.ajax({
            url: "http://gd.geobytes.com/AutoCompleteCity",
            type:'POST',
            dataType: "jsonp",
            data: {
                 q: $input.val(),
            }
       })
       .then( function ( response ) {
            $ul.html( response );
            $ul.listview( "refresh" );
            $ul.trigger( "updatelayout");               
       });      
     }
  });   
}
</script>

Here is DEMO link : http://dev.artoonsolutions.com/jignesh/mobile_auto/index.html

Answer 1

Need some modification in your function, Replace your function with this:-

function autoComplete(){    
   $( ".ui-input-text" ).on( "keyup", function ( e, data ) {    
       var $ul = $('#autocomplete'),
       $input = $(this),
       value = $input.val(),
       html = "";

       $ul.html( "" );
       if ( value && value.length > 1 ) {
       $ul.html( "<li><div class='ui-loader'><span class='ui-icon ui-icon-loading'>/span></div></li>" );
       $ul.listview( "refresh" );
       if(xhr && xhr.readystate != 4){
           xhr.abort(); 
       }
       xhr = $.ajax({
           url: site_url+"jewels/GetLeftPanel",
           type:'POST',             
           data: {
               Type: $('#btn_jtype').val(),
               Group: $('#btn_gid').val(),
               tagValue: $('#btn_tag_select').val(),
               Searching: $input.val(),
           },
           success: function(response){
            $ul.html( response );
            $ul.listview( "refresh" );
            $ul.trigger( "updatelayout");
       }
       });                    
    }
 });    
}