javascript - jQuery UI Autocomplete 键入时取消最后一个查询

Question

我在我的网站上使用 jQuery UI 自动完成功能进行城市搜索。用户输入3个字符后开始搜索。

我想知道如何更改此脚本以在用户继续输入时中止最后一个查询。

function enableCitiesAutocomplete() {
    var url = LIST.urls.api_cities_search;

    $('#txt_search_city').autocomplete({
        source: url,
        minLength: 3,
        select: function( event, ui ) {
            $(this).val( ui.item.value );
            $( "#id_city" ).val( ui.item.id );
            $(this).closest('form').submit();
        }
    });
}

Answer 1

我不知道您是否可以“中止”已经开始的完成。但是你可以通过中断自动完成的渲染部分来获得你想要的东西。如果自动完成由查询和呈现组成，并且查询涉及网络事务，这可能会起作用。
如果有一个查询和一个渲染，而查询只是通过本地存储的列表进行搜索，那么这可能行不通，因为延迟太低了。

This SO question描述了如何猴子修补 jQuery 自动完成包中的 renderMenu 和 renderItem fns。我想你可以使用相同的猴子补丁方法。

您需要指定函数而不是 URL 作为源。 This SO question描述如何。然后，在该函数中，增加一个表示“搜索正在进行”的计数变量。然后通过执行“ajax get”来执行搜索。还将 renderMenu 修补为 (a) 仅在单个搜索正在进行时呈现，以及 (b) 减少搜索计数。

它可能看起来像这样:

var queriesInProcess = 0;
var ac = $('#txt_search_city').autocomplete({ 
    minLength: 3, 
    select : .... ,
    // The source option can be a function that performs the search, 
    // and calls a response function with the matched entries. 
    source: function(req, responseFn) { 
        var url = baseUrl + req.term;
        queriesInProcess++;
        $.ajax({
          url: url,
          //data: data,
          success: function(json,xhr) {
              queriesInProcess--;
              var a = ....retrieve from the json .... 
              responseFn( a ); 
            },
            errpr : function () { queriesInProcess--; },
          dataType: 'json'
        });
    } 
}); 

ac.data( "autocomplete" )._renderMenu = function( ul, items ) { 
  if (queriesInProcess > 0) return; 
  var self = this; 
  $.each( items, function( index, item ) { 
    self._renderItem( ul, item ); 
  }); 
}; 

如果你想更精致一点，也可以试试abort the pending ajax request .这需要在源函数中发生；您需要缓存/存储从 $.ajax() 调用返回的 XHR，并在新的调用通过时调用 abort()。