AJAX call not firing after 5 keystrokes

Question

Why does this require more than 5 keystrokes before firing?

$( document ).ready(function() {

  $("#zipcode").on("keyup", function(event) { // keyup function

    if(this.value.length == 5){ // if 5 time keyup then fire the ajax 

        var zicpcode= $("#zipcode").val(); // get the value of zipcode

        $.ajax({
            url: "http://pages.em.essilorusa.com/page.aspx?QS=773ed3059447707d2a7242227e94bba8efcc7ce6da09facd&zip="+zicpcode,
            type: "get", //send it through get method
             success: function(results) {
                var res = results.substring((results.indexOf("<rs1>")+5),results.indexOf("</rs1>"));
                var splitted = res.split("|");
                var distinct = [];
                $.each(splitted , function(i, el){
                    if($.inArray(el, distinct ) === -1) 
                        distinct.push(el);
                });
                $("#zipcode").autocomplete({ source: distinct }); 
              },
        });
    }

  });

});

It's working fine but with one extra keystroke or backspace.

If I have remove the limit of 5 number ajax call it's working fine, but with if condition it takes extra key press. I have tried with keydown, keypress but same result. — SFMC_User, Oct 21 '15 at 18:07
Any kind of suggestion or solution will be appreciated guys please help me on this... — SFMC_User, Oct 21 '15 at 18:36
How are the AMPScript and ExactTarget tags are relevant? There's no AMPScript in your question and the only ET relevant piece is an ET landing page URL. — Adam Spriggs, Oct 22 '15 at 13:59
This may be helpful: http://stackoverflow.com/questions/11801672/ajax-call-after-x-characters — Adam Spriggs, Oct 22 '15 at 14:01
Are you sure it's not just because the ajax call takes some time before it receives data? try to type 5 letters then wait a few seconds. Otherwise.......well.....why not just type 4 instead of 5? — valepu, Oct 22 '15 at 14:26
Thanks @Adam and all what my problem was when I am passing zip code which has max length 5, earlier there was less data when i did not given limitation, fetching the data easily but now it has 30K zip code it takes 2 min. to load the list in drop down. So that i am passing 5 character length then only its fire auto complete. it working fine (faster) but now its take one extra key press or backspace button to pressed — SFMC_User, Oct 29 '15 at 22:37
And now my code working. I just initialize autocomplete and empty array before ajax call. — SFMC_User, Oct 29 '15 at 22:38
@adam: i am using jQuery UI 1.11.2, sorry for not mentioning AMPScript code here bcoz that part of code was working, i was passing zip code to another landing page where fetching all the data and concat the all data and passed to the source of auto complete. — SFMC_User, Oct 29 '15 at 22:59
and I have tried @Max if condition also but same things was happening. — SFMC_User, Oct 29 '15 at 23:00
Sorry for the mistype, it should be `if ($(this).val().length >= 5) {` — MaxZoom, Oct 30 '15 at 14:17
I have tried @max that condition, but earlier i have not initialized the autocomplete, so it's load the data with display none[so that time it's need extra keyup to show the loaded data ], that's why first i initialize the the empty array and auto-complete to avoid the dispaly none or extra key press. — SFMC_User, Nov 03 '15 at 11:58

score 0 · Answer 1 · edited Nov 11 '15 at 21:37

$(document).ready(function() {
    splitted = []; // Inialization empty array 
    $("#zipcode").autocomplete({
        source: splitted
    }); //Inialization for enabling the feature of Auto-complete
    $("#zipcode").keyup(function(event) {
        if (this.value.length == 5) {


            var zicpcode = $("#zipcode").val();
            $.ajax({
                url: "http://pages.em.essilorusa.com/page.aspx?QS=773ed3059447707d2a7242227e94bba8efcc7ce6da09facd&zip=" + zicpcode,
                type: "get", //send it through get method
                async: false,
                success: function(results) {
                    var res = results.substring((results.indexOf("<rs1>") + 5), results.indexOf("</rs1>"));
                    var splitted = res.split("|");
                    $("#zipcode").autocomplete({
                        source: splitted
                    });
                },
            });

        }
    });
});

AJAX call not firing after 5 keystrokes

1 Answers1

Linked