Want to add a custom auto suggest form to your store or website? Please read the following post to do so…

Hello Everyone,

In this post we’ll be trying to implement a customized auto suggest form with scrolls based upon keyboard up-down keys. Please make sure you have the jQuery library in order to make ajax calls. The following example can be used with any platform.

Don’t have jQuery? Click here to download now or try using the jQuery CDNs for quick start.

Steps to make your custom auto suggest search form:

1. Create an html search form.

2. Create a script to make ajax call request based upon user input and get the result in json format.


3. JavaScript Code (After Search results are fetched and attached to ul.show-result)

var bindUpDownNavigation = function(){
	var selected = jQuery("#result-search-autocomplete").find("li.focusSearchField");		
	var el_group = jQuery("#result-search-autocomplete li");
	var sel_index = el_group.index(selected);
	var countEnterKey = 0;
	jQuery("#inputautosearchtxt").keydown(function(e) {
				jQuery("#result-search-autocomplete li.focusSearchField > a > div.row div > button").trigger('click');
				return false;
		if(e.keyCode == 40 || e.keyCode == 38){
			if (e.keyCode == 40) { // down
				if (el_group.eq(sel_index).length==0){
					sel_index = 0;
			}else if (e.keyCode == 38) { // up 	
				if (el_group.eq(sel_index).length==0){
					sel_index = parseInt(el_group.length) - 1;
			return false;
function updateSearchTextOnUpDown(){
	SearchText = jQuery("#result-search-autocomplete li.focusSearchField > a > div.row div > h4").text();//value of the li element  which has come out in search result

4. Sample code format inside of ul.show-result

  • Apple Cinema 30"

  • Apple Cinema 30"

Please update the css and adjust classes, ids as per your task scope. Also, please make sure you are handling the server side for processing search text and return data in json format for ajax calls made in step 2.

Good Luck!!!