Google Like Search TextBox

• Download source - 5.05 KB

Introduction

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.

Background

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.

Welcome.aspx

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">	
          body 
          {
           font: 11px arial;
           }
	   .suggest_link 
	   {
	   background-color: #FFFFFF;
	   padding: 2px 6px 2px 6px;
	   }	
	   .suggest_link_over
	   {
	   background-color: #3366CC;
	   padding: 2px 6px 2px 6px;	
	   }	
	   #search_suggest 
	   {
	   position: absolute;
	   background-color: #FFFFFF;
	   text-align: left;
	   border: 1px solid #000000;			
	   }
	</style>

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.

SearchSuggest.js

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");	
    }
    else
    {
        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)
{
scrolldiv(key); 
}
else
{
if (searchReq.readyState == 4 || searchReq.readyState == 0) 
{
var str = escape(document.getElementById('txtSearch').value);
strOriginal=str;
searchReq.open("GET", 'Result.aspx?search=' + str, true);		
searchReq.onreadystatechange = handleSearchSuggest;
searchReq.send(null);	
}
} 	
}

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.

Result.aspx.cs

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.Connection=con;
        cmd.CommandType= CommandType.StoredProcedure;
        
        cmd.CommandText="SFund";

        //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;
        cmd.Parameters.Add(parClientName);
        SqlDataAdapter da = new SqlDataAdapter(cmd);
        da.Fill(dt);
        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()  + "~");   
            }
        }

           Response.Write(sb.ToString());   

    }

Request

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.