Google-Suggest Simulation using JavaScript in ASP.NET/ASP

• Download complete code - 2.18 KB

Introduction

This article is about an implementation, similar to ‘Google suggest’ only in terms of the User interface, and not the actual ‘Google suggest’ concept using server callbacks. The implementation is purely client-side display management of the data using simple JavaScript. This is not about using Server callbacks, Ajax or XMLHttp Object.
This will be more clear after going through the below requirement.

Background

I have an existing ASP.NET/ASP application, meant for DBA-Work Tracking. One of the important pages of the application is the work-entry page, where the user selects the database details, etc. This page consists of a huge list of Server names (Names) in a dropdown list.

The users of the application are well familiar with the names of the servers, but due to the long length of the dropdown list, it becomes pretty difficult to scroll down, search and select the required name- more often unable to select the names which are at the bottom of the scroll bar.

Solution

My solution is to replace/use the dropdown with something like a Google Suggest – so when the user types the starting letters of the servername, it should display the names similar to it.

Implementation

My solution is a simple JavaScript client-side code, without using any Ajax, serverside code or XMLhttp object. I have taken two controls:

1. TextBox – To enter the starting letters of the name.
   XML

   <input type=text name="txtSystemNamesList" id="txtAjaxSystemList"  
   	önkeyup="GetSuggestNames(this.value)" >

2. Div – To display the matching names.
   HTML

   <div class="tip" id=""divSystemList"" 
   	önmouseover=""javascript:style.cursor='hand';""></div>

The Div tag is placed exactly below the textbox, and has the same Length & style properties, and the visibility is 'hidden' by default.

Load the list of names to be displayed into a client side Array variable. – The server-side code to generate the names List is available –already being used for the data source of the dropdown list.

//Fill the NamesArray and IDsArray with SystemNames and SystemId values   
    <% for(int i=0; i<nameslist.rows.count; arrsystemnameslist[
    <%="i" arrsystemidslist[<%="i" %>]=""<%=NamesList.Rows[i]["Name"].ToString()%>";" />

Call a JavaScript function on the onkeyup event of the TextBox - GetSuggestNames(this.value). This function compares the letters typed in the Textbox with the list of names present in the array, and returns all the matching names which start with the typed letters.

//Gets the Names starting with the entered text in TextBox 
        GetSuggestNames = function(strSystemListText)
            {
	            var divSystemList =  document.getElementById("divSystemList");
	            if(strSystemListText.length >0)
                   {
                         divSystemList.innerHTML = ShowSuggestDiv(strSystemListText);
                         divSystemList.style.visibility = 'visible';
                   }
                   else
                   {
	                    divSystemList.innerHTML ="";
                        divSystemList.style.visibility = 'hidden';
                   }
            }

Each row of the Result set is formatted into an HTML anchor tag, and these tags are added to the Div tag as strings. The visibility of the Div is changed to 'visible' and Scroll bar should be displayed if there are more number of matching names in the Div.

//Returns the Text for the Div with the hyperlinks  */
	        ShowSuggestDiv = function(strKey)
	        {
		        var strDivText = "";
		        var suggestCount = 11;
		        for(i=0;i<arrsystemnameslist.length; +=""
			<a" if(arrsystemnameslist[i].substring
			(0,strkey.length).touppercase()="=" !="0)" 
			önclick="\"SelectSuggestedName(""" + 
			arrSystemNamesList[i] + ""; 
			suggestCount--;
		}
		}
		}
		//Show a vertical Scrollbar to Div if the matching names 
		//are more than 3
		if(suggestCount > 3)
		{
		    var divSystemList =  document.getElementById("divSystemList");
                      divSystemList.style.height="50px";
		    divSystemList.style.overflow="scroll";
		    divSystemList.style.overflowX= "visible";
		}
		return strDivText;
	    }

From the List of the matching names, the user can click on the required name. onclick of the name – the value is copied into the Textbox field and the Div property is reset to 'hidden'.

// Fills the TextBox with the selected name in the Suggest Div, 
//Selects the corresponding element in the hidden NamesList 
SelectSuggestedName	 = function(intPos)
{
    var systemlist = document.getElementById("ddlNames");
    document.getElementById("txtSystemNamesList").value= arrSystemNamesList[intPos];
    document.getElementById("ddlNames").value= intPos+1;
    //ddlNames.selectedIndex = intPos;
    var divSystemList =  document.getElementById("divSystemList");
    divSystemList.style.visibility = 'hidden';
}

Final Words

This implementation can also be used in a separate Panel beside the dropdown list, and be shown as and when required.

Hope to write the implementation of 'Google-Suggest' in ASP.NET and JavaScript using XMLHttp object in my next article.

Hope this article is useful. Happy programming!

History

• 8^th December, 2009: Initial post