Click here to Skip to main content
Click here to Skip to main content

Pure JavaScript Autocomplete in ASP Classic

, 21 May 2014
Rate this:
Please Sign up or sign in to vote.
In this post I implemented auto-suggestion using pure JavaScript. Although if you wanna use jQuery autocomplete you can use it. But if you are only using for this purpose then I would recommend not to use jQuery. Firstly they are large files which will obviously affect your application’s perfo

In this post I implemented auto-suggestion using pure JavaScript. Although if you wanna use jQuery autocomplete you can use it. But if you are only using for this purpose then I would recommend not to use jQuery.

Firstly they are large files which will obviously affect your application’s performance. Secondly it is little slower in DOM traversing than pure JavaScript. Thirdly you can easily change JavaScript code, as you don’t necessarily need to have high level expertise in JavaScript.
In addition to that sometimes it has browser compatibility issues as well. So always try to use more standard and basic way in your programming. At least that’s my practice.

I implemented this JavaScript Autocomplete using ASP Classic as a server side language. But you can use any other language. I tried to make it as simple as possible but you can still make it more simple because there’s always a room for better.

This is the html:

 <input type="text" id="txtSearchEngines" class="data">
 <div id="suggestionBox" style="display:none">sss</div>

CSS classes:

#suggestionBox{
    position: absolute;
    z-index:999;
    border:01 gray solid;
    background-color:#E6E6E6;
    width: 300px;    
}
.suggest-data{
	line-height:20px;
    font-family: Tahoma;
    font-size:12px;
}
.rowSelected{
    background-color:#415C7C;
    color:white;
}

Here’s the JavaScript Code:

var request,xmlhttp,rowToSelect = 0,searchTextBox = document.getElementById("txtSearchEngines"),
_URL="AutoSuggest.asp";	
	BindSearchTextBox();
function BindSearchTextBox(){
	searchTextBox.addEventListener("keyup", KeyUpOnSearchTextBox,false);
	searchTextBox.addEventListener("keydown",HandleTabKey);
	document.getElementsByTagName("body")[0].addEventListener("click",CloseSuggestionBox);
}
function KeyUpOnSearchTextBox(e){
	var suggestBox = document.getElementById("suggestionBox");
	if((e.keyCode >= 65 && e.keyCode <= 90) || (e.keyCode == 40 || e.keyCode == 38 || e.keyCode == 8) ){				
		searchTextBox.removeEventListener("keyup",KeyUpOnSearchTextBox);
		if((e.keyCode == 40 || e.keyCode == 38 ) && suggestBox.style.display != "none"){    				
			SelectSuggestedRow(e.keyCode == 40 ? 1: -1 );
			BindSearchTextBox();
		}
		else{
			if(null != searchTextBox.value && "" != searchTextBox.value) SendAJAXRequestToServer(_URL+"?type=s&searchKey="+searchTextBox.value,ShowSuggestion,true);
			else{ HideSuggestionBox(); BindSearchTextBox();}
		}
	}
	else if(e.keyCode==13){searchTextBox.removeEventListener("keyup",KeyUpOnSearchTextBox); GetSelectedDetail(); }
}
function ShowSuggestion(){
	if (xmlhttp.readyState == 4) {
		if(xmlhttp.responseText != ""){
    		var suggestBox = document.getElementById("suggestionBox"),suggestRow=document.getElementById("suggest-rows");
    		suggestBox.style.display="";
    		suggestBox.style.top= searchTextBox.offsetTop + searchTextBox.offsetHeight+ 02;
    		suggestBox.style.left= searchTextBox.offsetLeft;
    		suggestBox.innerHTML = xmlhttp.responseText;    		
    		suggestBox.style.display="";	
    		SelectSuggestedRow(0);
		}
		else HideSuggestionBox();
		BindSearchTextBox();
	}
}
function CloseSuggestionBox(e){
	var eObj = e || window.event;
	if(eObj.target.className.indexOf("data") == -1) HideSuggestionBox();
}
function HandleTabKey(e){
	if(e.keyCode == 9) GetSelectedDetail();
	else if(e.keyCode == 27) HideSuggestionBox();
}
function HideSuggestionBox(){
	var suggestBox = document.getElementById("suggestionBox");
	suggestBox.innerHTML = null;
	suggestBox.style.display ="none";	
	rowToSelect=0;
	BindSearchTextBox();	
}
function HoverOverSuggestedList(obj){UnselectRow(); rowToSelect = obj.getAttribute("rowIndex"); SelectRow();}
function SelectRow(){document.getElementById("tblSuggest").rows[rowToSelect].className = "suggest-data rowSelected";}
function SelectedRowClicked(e){GetSelectedDetail();}
function UnselectRow(){	var suggestedTable=document.getElementById("tblSuggest");if(suggestedTable != null) suggestedTable.rows[rowToSelect].className = "suggest-data";}
function SelectSuggestedRow(rowCount){
	UnselectRow();
	if(rowToSelect == 0){ if(rowCount == 1) rowToSelect = rowCount;}
	else rowToSelect = rowToSelect + rowCount;
	if(rowToSelect >= document.getElementById("tblSuggest").rows.length){rowToSelect = rowToSelect - 1;SelectRow();}
	else SelectRow();
}
function GetSelectedDetail(){
	var suggestedTable=document.getElementById("tblSuggest");
	if(suggestedTable != null){
    	document.getElementById("lblName").innerHTML=suggestedTable.rows[rowToSelect].cells[1].innerHTML;
    	document.getElementById("lblValue").innerHTML=suggestedTable.rows[rowToSelect].cells[0].innerHTML;
	}
	HideSuggestionBox();
}
function SendAJAXRequestToServer(url,handler,ajax){
	xmlhttp= new XMLHttpRequest();
	xmlhttp.open('GET', url,ajax);
	xmlhttp.onreadystatechange = handler;
	xmlhttp.send(null);
}

ASP Classic code to return the suggestions for the search key;

'put your security/authenciation code here
response.write GetSuggestion
response.end
public Function GetSuggestion
	'Its just a demo you can write your code to get from database.
	dim searchKey 
		searchKey = Request.QueryString("searchKey")
	if(searchKey = "g") then
		GetSuggestion = "<table border='0' cellpadding='0' cellspacing='0' width='100%' id=""tblSuggest""><tr onclick=""SelectedRowClicked(event)"" onmouseover=""HoverOverSuggestedList(this)"" name='suggest-rows' rowIndex=""0"" class='suggest-data data' ><td class=""data"" style=""display:none"">1</td><td class=""data"" align='left' class=""data"">Google</td></tr><tr onmouseover=""HoverOverSuggestedList(this)"" onclick=""SelectedRowClicked(event)"" name='suggest-rows' class='suggest-data data' rowIndex=""2""><td class=""data"" style=""display:none"">3</td><td class=""data"" align='left'>Google2</td></tr></table>"
	else if(searchKey = "b") then
		GetSuggestion = "<table border='0' cellpadding='0' cellspacing='0' width='100%' id=""tblSuggest""><tr onclick=""SelectedRowClicked(event)"" onmouseover=""HoverOverSuggestedList(this)"" name='suggest-rows' class='suggest-data data' rowIndex=""1""><td class=""data"" style=""display:none"">2</td><td class=""data"" align='left'>Bing</td></tr></table>"
	end if
	end if
end function

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

M.Hussain.
Software Developer (Senior)
United States United States
My name is Muhammad Hussain. I am a Software Engineer.
blog

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web04 | 2.8.140721.1 | Last Updated 22 May 2014
Article Copyright 2014 by M.Hussain.
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid