Tutorial :jQuery Autocomplete plugin issue


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 function 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 what's 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.


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


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");  


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

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

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »