jQuery UI的自动完成输入

当我使用jQuery UI自动完成对我的网站上搜索城市取消最后一次查询。它在用户输入3个字符后开始搜索。jQuery UI的自动完成输入

我不知道如何来改变这个脚本，如果用户继续输入中止的最后一个查询。

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(); 
     } 
    }); 
}

来源

2012-02-08 Brenden

如果中止查询，那么就不会有结果的自动完成功能显示。你想哭，直到用户停止键入然后渲染结果？ – Paul 2012-02-08 01:40:25

基本上，我希望它中止最后一个查询，如果发送一个新的查询。因此，例如，如果他们在输入时暂停并发送查询，然后他们继续输入，我想先前的查询中止 – Brenden 2012-02-08 01:45:12

这个问题对你有帮助吗？ http://stackoverflow.com/q/9040929/497356 – 2012-02-08 03:15:54

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

This SO question介绍如何猴子补丁在jQuery的自动完成包装的renderMenu和renderItem FNS。我想你可以使用相同的猴子补丁方法。

你需要指定，为源，一个功能，而不是URL。 This SO question描述如何。然后，在该函数中，增加一个计数变量，指出“搜索正在进行中”。然后通过执行“ajax get”来执行搜索。（a）仅在单个搜索正在进行时呈现renderMenu，并且（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()。

来源

2012-02-08 01:59:37 Cheeso

jQuery UI的自动完成输入

回答

相关问题