Skip to main content
Email Password   helpLost your password?

Dictionary

Introduction

This is an implementation of Google Suggest like dictionary in ASP.NET.

Background

After seeing Google Suggest, I was amazed and wanted to know how it worked. This project is just an experiment using the same technique that Google uses.

Using the code

The ZIP file consists of two files. One is an HTML file that uses the XMLHttpRequest object to make requests and get back data. The other one is a server script implemented in ASP.NET that connects to a SQL Server database. If you wish to implement a similar interface, just use the HTML functions provided. A proof of concept website could be accessed here.

How does it work?

The architecture could be explained as outlined below:

Concept

As you type a word in the textbox, a JavaScript event fires an 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):

<%@Page Language="C#"%>
<%@Import Namespace="System.Data"%>
<%@Import Namespace="System.Data.SqlClient"%>
<%@Import Namespace="System.Configuration"%>

<script 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("<strong>"+row["Word"].ToString()+"</strong> <i>");
                  Response.Write("row["Type"].ToString()+"</i>: "+meaning+"<br>");
            }
        }


    }

</script>

XMLHttpRequest object in the HTML page

<html>
    <head>
        <script>
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();
    var url="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>
    </head>
    <body onload="BodyLoad();">
        <form name="form1">
        <input name="keyword" onKeyUp="SendQuery(this.value)" 
          style="WIDTH:500px" autocomplete="off">
            <div align="left" class="box" id="autocomplete" 
              style="WIDTH:500px;BACKGROUND-COLOR:#ccccff"></div>
        </form>

    </body>
</html>

The KeyUp event on the textbox triggers the SendQuery method. Note that we are disabling the auto-complete feature so it does not overlap with our div tag. The Initialize method creates the XMLHttpRequest object. In Mozilla and Safari, you could simply do this by using:

req=new XMLHttpRequest();

In IE, you could create the object based on the user's installation of MSXML libraries. The Process method acts as an event handler and displays the response text once the response is complete from the web server.

Observations

History

You must Sign In to use this message board.
 
 
Per page   
 FirstPrevNext
GeneralSo simple yet so powerful,,, Pin
sevenlogix
6:23 22 May '09  
GeneralGoogle Suggest like Dictionary Pin
luckyroy
21:38 3 May '09  
GeneralQuery Modification Pin
Member 4505812
13:29 16 Dec '08  
GeneralProblem in "document.getElementById("autocomplete").innerHTML=req.responseText;" Pin
4:01 10 Jan '07  
Questionselectable values in div tag Pin
utsi
3:04 12 Oct '06  
Generalget it working with access database??? Pin
wahabm
1:13 8 Aug '06  
Generalhow to display in listbox... Pin
kamalika_kk
3:36 10 Jul '06  
GeneralPlease I need the database of this program Pin
AMRSINAN
0:38 13 Jun '06  
Generaldatabase link died Pin
masterbkhn
8:53 27 Apr '06  
GeneralRe: database link died Pin
piglet01
17:09 23 Sep '07  
GeneralAJAX creating problem on Local Site Pin
eshna
21:41 16 Mar '06  
GeneralRe: AJAX creating problem on Local Site Pin
tejas_chonkar
23:21 23 Apr '06  
GeneralW2003K web server permissions Pin
LeighG
2:28 12 Feb '06  
NewsConverted code in vb.net Pin
suri1971
22:25 30 Jan '06  
NewsCode in Vb.net Pin
suri1971
21:59 30 Jan '06  
GeneralSorting a SubString Search Pin
Fabito
3:14 24 Nov '05  
QuestionCode behind does not work? Pin
peterver
10:40 16 Nov '05  
GeneralStatus 12029 when running code from client Pin
Wegas
10:24 29 Sep '05  
GeneralRe: Status 12029 when running code from client Pin
MitchV
10:22 14 Feb '06  
Generalproblem implementing in vb.net Pin
saggimanoj
1:41 23 Sep '05  
GeneralIts really nice article..great job Pin
Surendra Sambana
20:16 4 Sep '05  
GeneralHow to Change Source From Your Site Pin
eebb2244
23:01 21 Aug '05  
GeneralMining Google Web Services: Building Applications with the Google API Pin
Anonymous
21:48 21 Aug '05  
GeneralGoogle Hacks: 100 Industrial-Strength Tips & Tools Pin
Anonymous
3:53 14 Aug '05  
Generalnot able to host the page Pin
iomca4u
19:14 6 Aug '05  


Last Updated 27 Dec 2004 | Advertise | Privacy | Terms of Use | Copyright © CodeProject, 1999-2009