Help required on JQuery Autocomplete plugin

Question

Hey guyz need some help with JQuery. I have a requirement in my project to provide an autocomplete feature for a textBox like the one recently applied on google. I need to fetch data on each keystroke so I am calling a JQuery fuction on keypress. The problem is the Autocomplete feature gets triggered on mouse click in the textBox and not on keypress. I will attach the code snippet for a better understanding of the problem which goes like this

$(document).keypress(function(){ 
    lastKey = String.fromCharCode(window.event.keyCode); 
    alert('lastKey :: ' + lastKey);
    var txtVal = document.frm.selectedTechParamName.value + lastKey; 
    alert('txtVal :: ' + txtVal); 
    $("#suggestTechParamName").autocomplete('/AEA-Authoring/TechnicianParameterAutocomplete?userAction=getTechParamsForSvcLvlDataID&txtVal=' + txtVal, { 
        matchContains: true, 
        minChars: 0, 
        cacheLength:0, 
        maxItemsToShow:10
    }); 
});

Now whats going on is when any key is pressed the alerts are working properly, but the second half of the function i.e.

$("#suggestTechParamName").autocomplete('/AEA-Authoring/TechnicianParameterAutocomplete?userAction=getTechParamsForSvcLvlDataID&txtVal=' + txtVal, { 
    matchContains: true, 
    minChars: 0, 
    cacheLength:0, 
    maxItemsToShow:10
});

gets called when we click on the textBox. Also as you can see the attribute "cacheLength:0" which I have written is because I do not want Autocomplete to cache any data, but this also does not seem working. Any quick response would be appreciated.

Thanks in advance !!!

Answer 1

Try unbinding the click event from the textbox you have attached your autocompleter to:

$( "#suggestTechParamName").autocomplete('/AEA-Authoring/TechnicianParameterAutocomplete?userAction=getTechParamsForSvcLvlDataID&txtVal=' + txtVal, {
    matchContains: true,
    minChars: 0, cacheLength:0, maxItemsToShow:10
}).unbind("click");

Answer 2

It looks like you are using the JQuery plugin to achieve this. I use the same plugin and every time a key is pressed it sends a new Ajax request to the server.

You mentioned that you are setting cacheLength to 0, according to the docs, the value must be >= 1. Have you tried changing this to see if it changes the behaviour?

Edit 1: Also, according to the docs, it appears that matchContains: true is only useful if you have cacheLength > 1 (cacheLength = 1 means no caching, default is cacheLength = 10).

Answer 3

I used this and the things worked just fine for me.

$(document).ready(function() {
    $("#suggestTechParamName").autocomplete('/AEA-Authoring/TechnicianParameterAutocomplete', {
        extraParams: { userAction: 'getTechParamsForSvcLvlDataID'
            }
    });
});