CODEWITHSUNDEEP
ajax
jaram
jaram

Reputation: 127

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 after 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

Upvotes: 2

Views: 582

Answers (4)

irishbuzz
irishbuzz

Reputation: 2460

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.

Upvotes: 0

Ole Melhus
Ole Melhus

Reputation: 1929

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.

Upvotes: 1

Dan Ganiev
Dan Ganiev

Reputation: 1062

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.

Upvotes: 1

Marcelo Cantos
Marcelo Cantos

Reputation: 185882

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.

Upvotes: 0

Related Questions