Tutorial :jQuery Autocomplete plugin issue



Question:

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.


Solution:1

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


Solution:2

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


Solution:3

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
Previous
Next Post »