自动建议和Ajax问题下拉

请到这里 - http://auspost.com.au/apps/postcode.html 自动建议和Ajax问题下拉

当我键入314 Ajax调用被触发，当我键入5它然后再另一个呼叫被触发后，但是当我删除了5则没有通话被触发但仍显示数据。

他们是怎么做到的？请帮助我，因为我是新来这个概念

2010-11-02 jaram

自动完成工作的方式是，如果您键入一个字符串，然后剪切为仅包含该字符串的一部分，则它将使用旧列表并在该列表中进行限制。所以如果你输入“123”然后退格到“12”，它会使用带有新限制的旧列表。 – 2010-11-02 12:56:55

使用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 
     } 
     }); 
    });

虽然，它似乎像澳大利亚邮政只是使用jQuery UI自动完成与minChars 3.阅读有关此http://docs.jquery.com/UI/Autocomplete jQuery用户界面自动完成。

您也可以尝试这个帖子：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/一个很好的指南，可能你想要做什么。

来源

2010-11-02 11:36:05

+1，但应该是'inputField.val（）.length> = 3'或者'> 2';） – irishbuzz 2010-11-02 11:38:53

当长度为3时，AJAX调用可能会或不会被触发.OP询问他们如何实现滞后。 – 2010-11-02 11:40:13

我已经纠正它，并给予ref。自动完成，因为这是澳大利亚邮政正在使用的。 – 2010-11-02 11:41:51

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

来源

2010-11-02 11:40:37

似乎他们正在使用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")}})})} 
//...

检查自己的文件，如果你想细节。

来源

2010-11-02 12:00:22

相关的代码是在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中创建一个新的Autocompleter对象。这个对象包含了很多额外的处理，包括一些缓存管理，这些处理很可能是你要找的。

该代码已被缩小到难以遵循的程度，并且我还没有弄清楚该缓存过程的具体执行方式，但希望这会为您提供一个开始。

来源

2010-11-02 15:10:54 irishbuzz

自动建议和Ajax问题下拉

回答

相关问题