65.9K
CodeProject 正在变化。 阅读更多。
Home

类似 Google Suggest 的字典

Gavi Narra
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.87/5 (67投票s)

2004年12月27日

3分钟阅读

viewsIcon

325186

downloadIcon

3245

使用远程脚本实现 Google suggest 的一种实现。

Dictionary

引言

这是一个用 ASP.NET 实现类似 Google Suggest 的字典。

背景

在看到 Google Suggest 之后，我感到非常惊讶，并想知道它是如何工作的。 这个项目只是一个使用 Google 使用的相同技术的实验。

使用代码

ZIP 文件包含两个文件。 一个是使用 XMLHttpRequest 对象发出请求并取回数据的 HTML 文件。 另一个是用 ASP.NET 实现的服务器脚本，它连接到 SQL Server 数据库。 如果您想实现类似的界面，只需使用提供的 HTML 函数。 可以在 这里 访问概念验证网站。

它是如何工作的？

架构可以解释如下

  • 概念
  • 数据库
  • ASP.NET 页面
  • HTML 页面中的 XMLHttpRequest 对象
  • 观察

概念

当您在文本框中键入一个单词时，JavaScript 事件会触发对 ASPX 页面的 HTTP GET 请求。 ASPX 页面的响应只是显示在文本框下方的 div 标签中。 页面不会因为每次击键而刷新/重新加载，因为所有操作都是由页面中的 JavaScript 完成的。 允许我们执行此操作的主要 JavaScript 对象是 XMLHttpRequest。 您可以从 Apple 的开发者网站 这里 阅读相关信息。 它受 IE 5.0 +、Mozilla 1.0 + 和 Apple 自己的 Safari 1.2 + 支持。

数据库

数据库只包含一个表。 数据来自一个免费的在线词典（一个公共领域的英语单词列表词典，基于“韦氏未删节词典”的公共领域部分，该词典又基于 1913 年的美国韦氏未删节词典。您可以从 这里 下载）。 表名为 WordList

WordList
单词 varchar(255)
类型 varchar (10)
含义 文本

我为“Word”列创建了一个索引以提高速度。 数据库中总共有 182696 个单词。

ASP.NET 页面

ASP.NET 页面非常简单。 从数据库中获取前 10 行匹配的行并将其输出。 以下是我正在使用的代码（尽管 SqlDataReader 可能更合适）

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

HTML 页面中的 XMLHttpRequest 对象

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

文本框上的 KeyUp 事件触发 SendQuery 方法。 请注意，我们禁用了自动完成功能，因此它不会与我们的 div 标签重叠。 Initialize 方法创建 XMLHttpRequest 对象。 在 Mozilla 和 Safari 中，您可以通过使用以下方法来完成此操作

req=new XMLHttpRequest();

在 IE 中，您可以根据用户安装的 MSXML 库创建对象。 Process 方法充当事件处理程序，并在 Web 服务器的响应完成后显示响应文本。

观察

  • Google Suggest 可能通过将所有建议词放在主内存中和一个只做其他事情的自定义 Web 服务器来运行（尽管这个概念在 C# 中很容易实现）。
  • 来自 Web 服务器的往返次数应该最少（最大 2K），因为它可能会很快耗尽带宽。

历史

  • 2004 年 12 月 24 日
    • 初始版本 1.0。
© . All rights reserved.