Just like google suggest

Concept
As you type a word in the textbox, a javascript event fires and a HTTP GET request to the ASPX page. The response from the ASPX page is simply displayed in a div tag under the textbox. The page is not refreshed/reloaded for every keystroke as everything is done by the javascript in the page. The main javascript object that allows us to do this is XMLHttpRequest. You could read about it from Apple's developer site
here
. This is supported by IE 5.0 +, Mozilla 1.0 + and Apple's own Safari 1.2 + .


Database
The database contains just one table. The data comes from a freely available online dictionary (a public domain English word list dictionary, based on the public domain portion of "The Project Gutenberg Etext of Webster's Unabridged Dictionary" which is in turn based on the 1913 US Webster's Unabridged Dictionary. You could download it from
here
). The table is called WordList
WordList
Word varchar(255)
Type varchar (10)
Meaning text
I created an index on "Word" column for speed. There are a total of 182696 words in the database.
ASP.NET page
The ASP.NET page is pretty straight forward. Gets the top 10 matching rows from the database and spits it out. Below is the code i am using(Although SqlDataReader might be more appropriate)




runat="server">
    public void Page_Load(object sender,EventArgs args)
    {
        string keyword=Request["k"];
        if(keyword!=null && keyword.Trim()!="")
        {
            string sql="select top 10* from WordList where word like '"+keyword.Trim().Replace("'","''")+"%'";
            SqlConnection conn=new SqlConnection(ConfigurationSettings.AppSettings["connectionString"]);
            conn.Open();
            DataTable dt=new DataTable();
            SqlCommand command=new SqlCommand(sql,conn);
            SqlDataAdapter adapter=new SqlDataAdapter(command);
            adapter.Fill(dt);
            conn.Close();
            foreach(DataRow row in dt.Rows)
            {
                string meaning=row["Meaning"].ToString();
                Response.Write(""+row["Word"].ToString()+" ");
                                  Response.Write("row["Type"].ToString()+": "+meaning+"
");
            }
        }
    }
script>
XMLHttpRequest object in the HTML page

   
        
var req;
function Initialize()
{
    try
    {
        req=new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch(e)
    {
        try
        {
            req=new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch(oc)
        {
            req=null;
        }
    }
    if(!req&&typeof XMLHttpRequest!="undefined")
    {
        req= new
    XMLHttpRequest();
}
} function
SendQuery(key)
    {
    Initialize(); varurl="http://www.objectgraph.com/dictionary/dict.aspx?k="+key;
    if(req!=null)
    {
        req.onreadystatechange = Process;
        req.open("GET", url, true);
        req.send(null);
    }
}
function Process()
{
    if (req.readyState == 4)
        {
        // only if "OK"
            if (req.status == 200)
            {
                if(req.responseText=="")
                    HideDiv("autocomplete");
                else
                {
                    ShowDiv("autocomplete");
                    document.getElementById("autocomplete").innerHTML =req.responseText;
                }
            }
            else
            {
                document.getElementById("autocomplete").innerHTML=
                                        "There was a problem retrieving data:br>"+req.statusText;
            }
        }
}
function ShowDiv(divid)
{
   if (document.layers) document.layers[divid].visibility="show";
   else document.getElementById(divid).style.visibility="visible";
}
function HideDiv(divid)
{
   if (document.layers) document.layers[divid].visibility="hide";
   else document.getElementById(divid).style.visibility="hidden";
}
function BodyLoad()
{
    HideDiv("autocomplete");
    document.form1.keyword.focus();
}
script>
   
    >
         name="form1">
         name="keyword" onKeyUp="SendQuery(this.value)" style="WIDTH:500px" autocomplete="off">
             align="left" class="box" id="autocomplete" style="WIDTH:500px;BACKGROUND-COLOR:#ccccff">