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()。

jQuery UI Autocomplete键入时取消上一个查询

1 个答案: