Many of us are using Google as a search engine. There are many reasons why we prefer Google, but one of the reasons is that Google suggests the possible search results and makes life easy. This search Suggest Textbox is very useful in many of our web applications. This article will help you to implement Search Suggest Textbox.
The user will type a character in the search
textbox.Onkeyup event will get fired. It calls the method which is responsible for processing AJAX and receives a response. This response will be shown using
XMLHttpRequest object, Internet Explorer clients can retrieve and submit XML data directly to a Web server without reloading the page. To convert XML data into renderable HTML content, use the client-side XML DOM or Extensible Stylesheet Language Transformations (XSLT) to compose HTML elements for presentation.
Using the Code
The code uploaded with this article contains mainly three files:
Let's see each page in detail.
This page has a search Textbox which displays the suggested search results while the user is typing in the search textbox.
The above code will import SearchSuggest.js file which is responsible for asynchronous postback.
<style type="text/css" media="screen">
font: 11px arial;
padding: 2px 6px 2px 6px;
padding: 2px 6px 2px 6px;
border: 1px solid #000000;
The above CSS code is for displaying selected/unselected from the suggestion results:
<input type="text" id="txtSearch" name="txtSearch" alt="Search Criteria"
önkeyup="searchSuggest(event);" autocomplete="off" style="width: 544px" />
<input type="submit" id="cmdSearch" name="cmdSearch"
value="Search" alt="Run Search" />
txtSearch is the textbox for search. A method
searchSuggest(event) from SearchSuggest.js is called on
onkeyup event of it. We have to use
onkeyup event so that on every single type of character, search suggest should process and give the corresponding result.
div search_suggest is hidden. It will be visible when a result is found for the corresponding typed characters.
Search submit button to search the results. The scope of this article is only upto the search suggest. One can enhance functionality on click of search button. This article does not have any code of
onclick of Search button.
This file has code for AJAX Request using
return new XMLHttpRequest();
return new ActiveXObject("Microsoft.XMLHTTP");
alert("Time to upgrade your browser?");
getXmlHttpRequestObject function will return the object of
XMLHttpRequest depending upon the browser type. For Internet Explorer 5, Internet Explorer 6, it creates
ActiveXObject from "
searchReq = getXmlHttpRequestObject();
var key = window.event ? e.keyCode : e.which;
if (key==40 || key==38)
if (searchReq.readyState == 4 || searchReq.readyState == 0)
var str = escape(document.getElementById('txtSearch').value);
searchReq.open("GET", 'Result.aspx?search=' + str, true);
searchReq.onreadystatechange = handleSearchSuggest;
searchSuggest will accept send request to Result.aspx and get response from it. While requesting, it will send the typed characters in Search Text box as
querystring. Based on the search criteria result.aspx will process and send the result back. The result.aspx will send the response back in
string format. The search result is concatenated by "~" , which will be handled in
handleSearchSuggest method. and creates
Div tag for each result.
The purpose of Result.aspx is to process Ajax request, so it does not have any code in HTML. It has only one line aspx page.
In the Code behind file, it validates the query string, takes search string and processes it to the database. Then response back result in string format. The generated string concatenated by "~".
private void Getresult()
DataTable dt = new DataTable();
SqlConnection con = new SqlConnection
("Data Source=Local;Initial Catalog=Rahul;User ID=sa;Password=sa");
SqlCommand cmd=new SqlCommand();
SqlParameter parClientName = new SqlParameter("@Client_Name", SqlDbType.VarChar);
parClientName.Value = clientName;
SqlDataAdapter da = new SqlDataAdapter(cmd);
StringBuilder sb = new StringBuilder();
if (dt.Rows.Count > 0)
for (int i = 0; i < dt.Rows.Count; i++)
sb.Append(dt.Rows[i].ItemArray.ToString() + "~");
This is the first article I am posting on The Code Project. You can download the code from the link at the top of this article.