Click here to Skip to main content
15,867,568 members
Articles / Web Development / HTML
Article

Google Suggest like Dictionary

Rate me:
Please Sign up or sign in to vote.
4.87/5 (78 votes)
26 Dec 20043 min read 306.8K   3.2K   206   70
An implementation of Google suggest using remote scripting.

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
  • The database
  • ASP.NET page
  • XMLHttpRequest object in the HTML page
  • Observations

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 +.

Image 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
Wordvarchar(255)
Typevarchar (10)
Meaningtext

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):

C#
<%@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

JavaScript
<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:

C#
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

  • Google Suggest is probably running by having all the suggestion words in main memory and a custom web server that does nothing else (although this concept is very easy to implement in C#).
  • Roundtrips from the web server should be minimal (2K max) as it might eat up bandwidth pretty fast.

History

  • December 24, 2004
    • Initial version 1.0.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
Web Developer
United States United States
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralMy vote of 4 Pin
Farhan Ghumra11-Jul-12 21:23
professionalFarhan Ghumra11-Jul-12 21:23 
Generalword dictionary Pin
mohit118-Sep-10 18:16
mohit118-Sep-10 18:16 
GeneralSo simple yet so powerful,,, Pin
sevenlogix22-May-09 5:23
sevenlogix22-May-09 5:23 
GeneralGoogle Suggest like Dictionary Pin
luckyroy3-May-09 20:38
luckyroy3-May-09 20:38 
GeneralQuery Modification Pin
Member 450581216-Dec-08 12:29
Member 450581216-Dec-08 12:29 
GeneralProblem in "document.getElementById("autocomplete").innerHTML=req.responseText;" Pin
Mahadeo Matre10-Jan-07 3:01
Mahadeo Matre10-Jan-07 3:01 
Questionselectable values in div tag Pin
utsi12-Oct-06 2:04
utsi12-Oct-06 2:04 
Questionget it working with access database??? Pin
wahabm8-Aug-06 0:13
wahabm8-Aug-06 0:13 
Questionhow to display in listbox... Pin
kamalika_kk10-Jul-06 2:36
kamalika_kk10-Jul-06 2:36 
GeneralPlease I need the database of this program Pin
AMRSINAN12-Jun-06 23:38
AMRSINAN12-Jun-06 23:38 
Generaldatabase link died Pin
tadneit27-Apr-06 7:53
tadneit27-Apr-06 7:53 
GeneralRe: database link died Pin
piglet0123-Sep-07 16:09
piglet0123-Sep-07 16:09 
GeneralAJAX creating problem on Local Site Pin
NazishAbbasi16-Mar-06 20:41
NazishAbbasi16-Mar-06 20:41 
GeneralRe: AJAX creating problem on Local Site Pin
tejas_chonkar23-Apr-06 22:21
tejas_chonkar23-Apr-06 22:21 
GeneralW2003K web server permissions Pin
LeighG12-Feb-06 1:28
LeighG12-Feb-06 1:28 
NewsConverted code in vb.net Pin
suri197130-Jan-06 21:25
suri197130-Jan-06 21:25 
NewsCode in Vb.net Pin
suri197130-Jan-06 20:59
suri197130-Jan-06 20:59 
GeneralSorting a SubString Search Pin
Fabito24-Nov-05 2:14
Fabito24-Nov-05 2:14 
QuestionCode behind does not work? Pin
peterver16-Nov-05 9:40
peterver16-Nov-05 9:40 
GeneralStatus 12029 when running code from client Pin
WencheS29-Sep-05 9:24
WencheS29-Sep-05 9:24 
GeneralRe: Status 12029 when running code from client Pin
MitchV14-Feb-06 9:22
MitchV14-Feb-06 9:22 
Generalproblem implementing in vb.net Pin
saggimanoj23-Sep-05 0:41
saggimanoj23-Sep-05 0:41 
GeneralIts really nice article..great job Pin
Surendra Sambana4-Sep-05 19:16
Surendra Sambana4-Sep-05 19:16 
QuestionHow to Change Source From Your Site Pin
Member 72606721-Aug-05 22:01
Member 72606721-Aug-05 22:01 
GeneralMining Google Web Services: Building Applications with the Google API Pin
Anonymous21-Aug-05 20:48
Anonymous21-Aug-05 20:48 

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.