搜索建议(Searching Suggestion)，已布置好样式

最新推荐文章于 2021-07-12 16:30:51 发布

windows2000

最新推荐文章于 2021-07-12 16:30:51 发布

阅读量834

点赞数

分类专栏： AJAX专题文章标签： function xmlhttprequest textbox server sql server string

AJAX专题专栏收录该内容

3 篇文章 0 订阅

订阅专栏

大家应该都看到过 GOOGLE 的搜索建议，就是当我们在输入关键词时，GOOGLE 会根据我们目前已输入的字显示相关的关键字建议，这就是搜索建议，现在很多网站都实现该友好的功能，如 YAHOO、狗狗搜索等。

实现该功能的思路就是：
在关键字输入框里，当用户按键弹起时，发送输入框里的字符串到服务器。
服务器根据收到客户端发来的字进入匹配搜索
将匹配用户已输入字的记录回发到客户端
客户端收到服务端的响应，输出建议。

其实就是异步回发（AJAX）。

下面是一个实例，实例实现的是搜索 SQL Server 默认数据库 Northwind 表 Customers 字段 CustomerID，当用户要输入框输入字时，返回该字段值与用户输入的字开头匹配的记录，即 CustomerID LIKE '用户已输入的字%'。

样式已设置好，显示建议的行为绝对位置，所以该行不会显示网页上的内容。

文件名：WordSuggest.aspx

源码如下：

.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="WordSuggest.aspx.cs" Inherits="WordSuggest" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>

<html xmlns="http://www.w3.org/1999/xhtml"; >
<head runat="server">
    <title>无标题页</title>
    <style type="text/css">
    .CInput{border:solid 1px gray;width:300px}
    #divSuggestions{border:solid 1px gray;width:300px;background:#fff;visibility:hidden}
    #divSuggestions span{display:block;padding:3px}
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <h1>搜索建议 DEMO</h1>
    <span>http://www.code-studio.net </span>
    <hr />
    <table style="border-collapse:collapse;"><tr><td><asp:TextBox ID="txtInput" runat="server" CssClass="CInput" οnkeyup="sendRqt(this)"></asp:TextBox>
    <asp:Button ID="Button1" runat="server" Text="Submit" /></td></tr>
    <tr style="position:absolute;"><td><div id="divSuggestions"></div></td></tr></table>
    </div>
    </form>
    <script type="text/javascript">
    var xhr;
    var isIe=window.navigator.appName.indexOf("Netscape") == -1?true:false;

.CS
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;

public partial class WordSuggest : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        string strInput = string.IsNullOrEmpty(Request.QueryString["w"]) ? string.Empty : Request.QueryString["w"];
        if (strInput.Trim().Length != 0)
        {
            Suggeste(strInput);
        }
    }

    private void Suggeste(string originalStr)
    {
     /* 搜索建议
      * 文件名: WordSuggest.aspx
      * 功能描述: 根据用户输入,在数据库 Northwind 的表 Customers 查找 CustomerID 字段值匹配的记录.
      */
        SqlConnection conn = new SqlConnection("data source=localhost;database=northwind;user id=sa;password=你的密码");
        string cmdText = "SELECT TOP 10 CustomerID FROM Customers WHERE CustomerID LIKE @w";
        SqlParameter para = new SqlParameter("@w", string.Format("{0}%", originalStr));
        SqlCommand cmd = new SqlCommand();
        cmd.Connection = conn;
        cmd.CommandText = cmdText;
        cmd.Parameters.Add(para);
        conn.Open();
        SqlDataReader reader = cmd.ExecuteReader();
        System.Text.StringBuilder sb = new System.Text.StringBuilder();
        while (reader.Read())
        {
            sb.AppendFormat("{0},", reader[0]);
        }
        reader.Close();
        conn.Close();
        Response.ContentType = "text/plain";
        Response.Clear();
        if (sb.Length != 0)
        {
            Response.Write(sb.ToString().Remove(sb.Length - 1));
        }
        else
        {
            Response.Write(string.Empty);
        }
        Response.Flush();
        Response.Close();
    }
}

windows2000

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
搜索建议(Searching Suggestion)，已布置好样式

<br />大家应该都看到过 GOOGLE 的搜索建议，就是当我们在输入关键词时，GOOGLE 会根据我们目前已输入的字显示相关的关键字建议，这就是搜索建议，现在很多网站都实现该友好的功能，如 YAHOO、狗狗搜索等。 <br />实现该功能的思路就是： <br />在关键字输入框里，当用户按键弹起时，发送输入框里的字符串到服务器。 <br />服务器根据收到客户端发来的字进入匹配搜索 <br />将匹配用户已输入字的记录回发到客户端 <br />客户端收到服务端的响应，输出建议。 <br />其实就是异步
复制链接

扫一扫

专栏目录