ajax question for auto suggestion and drop down

Please go here -- http://auspost.com.au/apps/postcode.html

when i type 314 an ajax call is fired ,when i type 5 afte开发者_JS百科r it then again another call is fired but when i delete the 5 then no call is fired but still showing the data.

How they are doing this ? Please help me as I am new to this concept

---

Seems like they're storing data using JQuery $.data() function. That's what I found in their webapps.js file:

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")}})})}
//...

Check the file yourself if you want the details.

---

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

Though, it seems like Australia Post is just using the jQuery UI autocomplete with minChars 3. Read about jQuery ui autocomplete here http://docs.jquery.com/UI/Autocomplete.

You can also try this post: jQuery UI Autocomplete and Caching Query Results http://developwithstyle.com/articles/2010/05/14/jquery-ui-autocomplete-is-it-any-good.html

Actually you'll find a nice guide at http://deathofagremmie.com/2010/04/03/jquery-ui-autocomplete-widget-caching/ that probably does what you want.

---

One simple way is to see whether the new value is a prefix of the previous value. After a bit of playing around, I think it may just cache a certain number of fetched results. But that's just a guess.

---

The relevant code is in webapp.js

Autocompletion is being invoked in mostly the normal way but the autocomplete function is later extended in order to perform additional processing

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

It is achieving caching by extending the autocomplete function like so

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

Within this jQuery.fn.extend() a separate jQuery.extend() is then executed to create a new Autocompleter object within jQuery. This object contains a lot of additional processing including some cache management which is more than likely what you're looking for.

The code has been minified to the point where it is difficult to follow and I haven't worked out exactly what way this cache process is carried out but hopefully this will give you a start.