Click here to Skip to main content
13,250,043 members (66,076 online)
Click here to Skip to main content
Add your own
alternative version


24 bookmarked
Posted 9 Aug 2009

Google Like Search TextBox

, 11 Aug 2009
Rate this:
Please Sign up or sign in to vote.
Google Like Search TextBox


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 DIV tags.


AJAX Request will be processed through JavaScript using the XMLHttpRequest object.

With the 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:

  1. Welcome.aspx
  2. SearchSuggest.js
  3. Result.aspx

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.

<script language="JavaScript" type="text/javascript" src="SearchSuggest.js"></script>

The above code will import SearchSuggest.js file which is responsible for asynchronous postback.

<style type="text/css" media="screen">
          font: 11px arial;
      background-color: #FFFFFF;
      padding: 2px 6px 2px 6px;
      background-color: #3366CC;
      padding: 2px 6px 2px 6px;
      position: absolute;
      background-color: #FFFFFF;
      text-align: left;
      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" /> 
<div id=""search_suggest""></div>

    <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 XMLHTTPRequest object.

function getXmlHttpRequestObject() 
    if (window.XMLHttpRequest) 
        return new XMLHttpRequest();	
        //For all the new browsers
    else if(window.ActiveXObject) 
        //for IE5,IE6
        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 "Microsoft.XMLHTTP".

//Our XmlHttpRequest object to get the auto suggestvar 
searchReq = getXmlHttpRequestObject();

function searchSuggest(e) 
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);
strOriginal=str;"GET", 'Result.aspx?search=' + str, true);		
searchReq.onreadystatechange = handleSearchSuggest;

The function 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();
        cmd.CommandType= CommandType.StoredProcedure;

        //SFund is Stored Procedure Name which accepts 
        //parameter as @Client_Name and gives the search Result
        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[0].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. 


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


About the Author

Rahul Garad
Systems Engineer Wellsfargo Inc
India India
Working as a Lead-Software with 12+ years of Experience in Software development.

You may also be interested in...

Comments and Discussions

QuestionWonderful work and very helpful Pin
Member 1232229311-Aug-17 2:09
memberMember 1232229311-Aug-17 2:09 
AnswerRe: Wonderful work and very helpful Pin
Rahul Garad9-Nov-17 10:59
memberRahul Garad9-Nov-17 10:59 
QuestionIt worked. How to do OnBlur of the Text Box? Pin
Member 1140969314-Oct-16 8:36
memberMember 1140969314-Oct-16 8:36 
PraiseThank you perfectly working Pin
Member 412491524-Apr-16 23:54
memberMember 412491524-Apr-16 23:54 
QuestionPlease Provide Database File Pin
aarif moh shaikh18-Sep-14 23:50
professionalaarif moh shaikh18-Sep-14 23:50 
AnswerRe: Please Provide Database File Pin
Rahul Garad20-Nov-14 11:54
memberRahul Garad20-Nov-14 11:54 
QuestionEnter key Pin
Member 1055817329-Jan-14 9:38
memberMember 1055817329-Jan-14 9:38 
AnswerRe: Enter key Pin
Rahul Garad18-Feb-14 6:23
memberRahul Garad18-Feb-14 6:23 
Questiongreat Pin
Sergio TM26-Jan-14 15:34
memberSergio TM26-Jan-14 15:34 
AnswerRe: great Pin
Rahul Garad18-Feb-14 6:23
memberRahul Garad18-Feb-14 6:23 
QuestionHow to Use Gridview for same code. Pin
Ostwal Aarti25-Sep-13 23:03
memberOstwal Aarti25-Sep-13 23:03 
BugError : Microsoft JScript runtime error: 'handleSearchSuggest' is undefined Pin
Manohar Adiga narayana10-Sep-13 1:09
memberManohar Adiga narayana10-Sep-13 1:09 
GeneralRe: Error : Microsoft JScript runtime error: 'handleSearchSuggest' is undefined Pin
Jolly Tri13-Oct-14 3:52
memberJolly Tri13-Oct-14 3:52 
QuestionFantastic Pin
Member 102499573-Sep-13 5:41
memberMember 102499573-Sep-13 5:41 
AnswerRe: Fantastic Pin
Member 1140969314-Oct-16 8:41
memberMember 1140969314-Oct-16 8:41 
GeneralMy vote of 5 Pin
VardhanJai20-Jun-13 2:41
memberVardhanJai20-Jun-13 2:41 
QuestionStored Procedure Pin
Sharepoint coder new31-Jan-13 9:08
memberSharepoint coder new31-Jan-13 9:08 
QuestionNice Pin
Dz0n Walker18-Oct-12 6:21
memberDz0n Walker18-Oct-12 6:21 
AnswerRe: Nice Pin
Rahul Garad18-Oct-12 17:02
memberRahul Garad18-Oct-12 17:02 
GeneralMy vote of 5 Pin
ransems21-Jan-12 7:45
memberransems21-Jan-12 7:45 
GeneralRe: My vote of 5 Pin
Rahul Garad26-Mar-12 4:08
memberRahul Garad26-Mar-12 4:08 
QuestionWorked great with little or no code change Pin
ransems21-Jan-12 7:43
memberransems21-Jan-12 7:43 
AnswerRe: Worked great with little or no code change Pin
Rahul Garad26-Mar-12 4:07
memberRahul Garad26-Mar-12 4:07 
AnswerWorks Fine Pin
Lakshmikantham Babu28-Nov-11 18:55
memberLakshmikantham Babu28-Nov-11 18:55 
GeneralRe: Works Fine Pin
Rahul Garad1-Dec-11 1:00
memberRahul Garad1-Dec-11 1:00 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.171114.1 | Last Updated 12 Aug 2009
Article Copyright 2009 by Rahul Garad
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid