Implementing search functionality on the keyup event using ajax has one pitfall. It can bombard our server with unnecessary ajax calls. So it becomes imperative for us to introduce some delay between the ajax calls. One way to implement it will be to make an ajax call after some delay(say 500 ms) after the first character has been typed in the text box. But,a better solution will be to make the ajax call after 500ms, after the last character has been typed. The idea is to clear the timer on each key-up event till the user types in the last charecter.
\n This solution can be implemented as given below:<\/p>\n
\n\n\r\n\r\n<\/pre>\n\r\n var alertTimerId = 0;\r\nfunction activateTimer(objId) {\r\n clearTimeout(alertTimerId);\r\n alertTimerId = setTimeout('sendData(\"' + objId + '\")', 500);\r\n }\r\n function sendData(objId) {\r\n ajax call \r\n }\r\n<\/pre>\n<\/div>\n<\/blockquote>\nHere, the instance or identifier of the time out call is captured in a variable and then this identifier is passed to clearTimeout function to clear the timer.
\nAnother problem associated with ajax search on keyup event is that if we are using tab button to navigate between different search fields, unnecessary ajax calls are shooted. To prevent this we can modify our activateTimer function like this :<\/p>\n\n\n\r\nfunction activateTimer(objId, event) {\r\n if (event.which == 9) {\r\n }\r\n else {\r\n clearTimeout(alertTimerId);\r\n alertTimerId = setTimeout('sendData(\"' + objId + '\")', 500);\r\n }\r\n }\r\n<\/pre>\n<\/div>\n<\/blockquote>\nEvent argument can be passed as parameter like this :<\/p>\n
\n\n\r\n \r\n<\/pre>\n<\/div>\n<\/blockquote>\nHope you find this useful.
\nImran Mir
\nimran@intelligrape.com<\/p>\n","protected":false},"excerpt":{"rendered":"Implementing search functionality on the keyup event using ajax has one pitfall. It can bombard our server with unnecessary ajax calls. So it becomes imperative for us to introduce some delay between the ajax calls. One way to implement it will be to make an ajax call after some delay(say 500 ms) after the first […]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":8,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-367","post","type-post","status-publish","format-standard","hentry","category-technology"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t