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:
TextBox
– To enter the starting letters of the name.
<input type=text name="txtSystemNamesList" id="txtAjaxSystemList"
önkeyup="GetSuggestNames(this.value)" >
Div
– To display the matching names.
<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.
<% 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.
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
.
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--;
}
}
}
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'
.
SelectSuggestedName = function(intPos)
{
var systemlist = document.getElementById("ddlNames");
document.getElementById("txtSystemNamesList").value= arrSystemNamesList[intPos];
document.getElementById("ddlNames").value= intPos+1;
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
- 8th December, 2009: Initial post