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.
Example:

<div class="search-wrapper">
<div id="search" class="input-group"><input id="inputautosearchtxt" class="form-control input-lg search-autocomplete" name="search" type="text" value="" placeholder="Search" /> <button class="btn btn-default btn-lg" type="button"><i class="fa fa-search"></i></button></div>

<div id="result-search-autocomplete" class="result-search-autocomplete" style="width: 352px;">
</div>
</div>

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

<script type="text/javascript">// <![CDATA[
	var width_search = document.getElementById("search").offsetWidth;
	$('.result-search-autocomplete').css({"width":width_search});
	$('.search-autocomplete').keyup(function(event) {
		if (event.keyCode == 40 || event.keyCode == 38 || event.keyCode==13 || event.keyCode==37 || event.keyCode==39) { 
			return false;
		}
		/* Act on the event */
		$('.result-search-autocomplete  ul').css({"overflow" : "hidden"});
		var search = $('input[name=search]').val();
		$.ajax({
		  method: "GET",
		  url: "URL TO FETCH AND LOOK FOR JSON DATA BASED UPON ENTER TEXT - WRITE URL HERE",
		  data: { search : search }
		}).done(function( result ) {
			var html = '';
			if(result && search != '')
			{
				var count = 0
				$.each(JSON.parse(result), function( index, value ) {
				  	if(count==0) {
				  	html += '

	<li class="focusSearchField">';
					}else{
					html += '

	<li>';
					}
				  	html += '<a href="'+value.href.replace('amp;', '')+'">';
				  	html += '

<div class="row nomargin">';
				  	html += '

<div class="col-md-3 col-xs-6">';
				  	html += '<img class="result-search-autocomplete-image" src="'+value.thumb+'">';
				  	html += '</div>


';
				  	html += '

<div class="col-md-6 col-xs-6">';
				  	html += '

<h4>'+value.name+'</h4>


';
				  	if(value.special == false)
				  	{
				  		html += '

<h5>'+value.price+' <i></i></h5>


';
				  	}else{
				  		html += '

<h5>'+value.special+' <i>'+value.price+'</i></h5>


';
				  	}
				  	
				  	html += '</div>


';
				  	html += '

<div class="col-md-3 mobhide">';
				  	html += '<button type="button" class="btn tagdattruoc">View Product</button>';
				  	//html += '

<h6>Xem them</h6>


';
				  	html += '</div>


';
				  	html += '</div>


';
				  	html += '</a>';
				  	html += '</li>


';
				  	count++;
				});
					$('.result-search-autocomplete').css({"display":"block"});
				  	if(count > 5)
					{
						$('.result-search-autocomplete  ul').css({"overflow-y" : "scroll"});
						$('.result-search-autocomplete  ul').css({"overflow-x" : "hidden"});
					}else{
						$('.result-search-autocomplete  ul').css({"overflow" : "hidden"});
					}
			}else{
				html = '';
				$('.result-search-autocomplete').css({"display":"none"});
			}

			$('.show-result').html(html);
		});
	});
// ]]></script>

 

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) {
		if(e.keyCode==13){
			updateSearchTextOnUpDown();
			jQuery('#result-search-autocomplete').hide();
			countEnterKey++;
			if(countEnterKey==1)
				jQuery("#result-search-autocomplete li.focusSearchField &gt; a &gt; div.row div &gt; button").trigger('click');
			else
				return false;
		}
		if(e.keyCode == 40 || e.keyCode == 38){
			if (e.keyCode == 40) { // down
				sel_index++;
				if (el_group.eq(sel_index).length==0){
					sel_index = 0;
				} 
			}else if (e.keyCode == 38) { // up 	
				sel_index--;
				if (el_group.eq(sel_index).length==0){
					sel_index = parseInt(el_group.length) - 1;
				}
			}
			el_group.removeClass("focusSearchField");
			el_group.eq(sel_index).addClass("focusSearchField");
			updateSearchTextOnUpDown();
			return false;
		}
	});
};
function updateSearchTextOnUpDown(){
	SearchText = jQuery("#result-search-autocomplete li.focusSearchField &gt; a &gt; div.row div &gt; h4").text();//value of the li element  which has come out in search result
	jQuery('input[name=search]').val(SearchText);
}

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

<ul>
	<li class="focusSearchField">
<div>
<h4>Apple Cinema 30"</h4>
</div></li>
</ul>
&nbsp;
<ul>
	<li>
<div>
<h4>Apple Cinema 30"</h4>
</div></li>
</ul>

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!!!

Advertisements

Yuvraj has written 39 articles

"Learn & Share" - I believe in this. What about you?