Question

请到这里 - http://auspost.com.au/apps/postcode.html

当我输入314时，ajax调用被触发，当我在它之后键入5然后再次触发另一个调用但是当我删除5然后没有激活但仍然显示数据。

他们是如何做到这一点的？请帮助我，因为我是这个概念的新手

Answer 1

使用jQuery：

 $(function() {
      inputField = $('#inputfield');

      inputField.keyup(function() {
         if (inputField.val().length >= 3){
            // do you ajaxcall here
         }
         else {
           // do nothing - inputlength isn't at least three
         }
      });
   });

尽管如此，看起来澳大利亚邮政只是在minChars 3中使用jQuery UI自动完成功能。在这里阅读jQuery ui autocomplete http://docs.jquery.com/UI/Autocomplete。

你也可以尝试这篇文章：jQuery UI自动完成和缓存查询结果http://developwithstyle.com/articles/2010/05/14/jquery-ui-autocomplete-is-it-any-good.html

实际上，你会在http://deathofagremmie.com/2010/04/03/jquery-ui-autocomplete-widget-caching/找到一个很好的指南，可能会做你想要的。

Answer 2

似乎他们使用JQuery $ .data（）函数存储数据。这就是我在他们的webapps.js文件中找到的：

var a=$(this);$(a).data("hintText","Enter suburb or postcode");
if($(a).attr("value")==""){$(a).val($(a).data("hintText")).addClass("ac_hint")}$(a).focusin(function(){
if($(a).val()==$(this).data("hintText")){$(a).val("");$(a).removeClass("ac_hint")}}).focusout(function(){
if($.trim($(a).val())==""){$(a).val($(a).data("hintText"));$(a).addClass("ac_hint")}})})}
//...

如果您需要详细信息，请自行检查文件。

Answer 3

一种简单的方法是查看新值是否是前一个值的前缀。经过一段时间的游戏，我认为它可能只是缓存了一定数量的获取结果。但这只是猜测。

Answer 4

相关代码位于webapp.js

自动填充主要以正常方式调用，但稍后会扩展自动完成功能以执行其他处理

function init_apps_autocomplete() {
    $(".fn_autocomplete").each(function () {var a = 207;if ($(this).parents("#module_iWantTo").length > 0 || $(this).parents("#modal_iWantTo").length > 0) {a = 182;}$(this).autocomplete(API_AUTOCOMPLETE, {minChars: 3, width: a, matchContains: false, autoFill: false, captureUsage: true, formatItem: function (d, c, b) {return d[2] + (" " + d[3] + " " + d[1]);}, formatMatch: function (d, c, b) {return d[2] + (" " + d[1]);}, formatResult: function (b) {return b[2] + (" " + b[1]);}, onSelection: function () {$(".fn_autocomplete").parents("form").find("select option:first").attr("selected", true);}, max: 10});});
    ...
}

通过扩展自动完成功能来实现缓存

(function (a) {a.fn.extend({autocomplete: function (b, c) {.....}});}(jQuery));

在此jQuery.fn.extend()中，然后执行单独的jQuery.extend()以在jQuery中创建新的Autocompleter对象。该对象包含许多其他处理，包括一些缓存管理，这很可能是您正在寻找的。

代码已被缩小到难以遵循的程度，我还没有确切地知道这个缓存过程的执行方式，但希望这会给你一个开始。

自动建议和下拉的ajax问题

4 个答案: