实现类似google搜索效果，文本框输入智能提示，没有用ajax控件和第三方控件，完全手写代码

来源：互联网发布：阿里云rds数据库正版化编辑：程序博客网时间：2024/05/22 02:03

前台页面代码：

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

<!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>
    <title>ajax智能提示</title>
    <style type="text/css">
        html, body
        {
            width: 100%;
            height: 100%;
        }
        ul
        {
            padding: 0px;
            margin: 0px;
            list-style: none;
        }
        li
        {
            cursor: pointer;
            padding: 0px 5px;
            line-height: 25px;
            height: 25px;
        }
    </style>
</head>
<body>
    输入字符串：
    <input type='text' id='txtInput' onkeyup='getSearchKeys()' />
    <div id='divShow' style="position: absolute; z-index: 9999; width: 200px; height: auto;
        display: none; border: 1px solid #ddd">

    </div>
</body>

        if(t.tagName.toLowerCase()=='li')
        {
          txtInput.value = t.innerHTML;
           divShow.style.display = "none";
           return;
        }
        if(e && e.stopPropagation){
          //W3C取消冒泡事件
          e.stopPropagation();
          }else{
          //IE取消冒泡事件
          window.event.cancelBubble = true;
          }
    };
    document.body.onclick=function(e)
    {
        divShow.style.display = "none";
    };
};
function getSearchKeys()
{
var s= txtInput.value;
    if(s=='')
    {
        divShow.style.display = "none";
        return;
    }
      var arr=['<ul>'];
      for(var i=0;i<keys.length;i++)
      {
        if(keys[i].indexOf(s)>=0){
        arr.push('<li>'+keys[i]+'</li>');
        }
      }

      if(arr.length>1){
        arr.push('</ul>');
        divShow.innerHTML = arr.join('');
        divShow.style.display = "block";
      }else{
        divShow.style.display = "none";
      }
}

</html>
后台代码：

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Collections.Generic;
using System.Data.OleDb;

public partial class AjaxTest : System.Web.UI.Page
{
public string tip = string.Empty;

    protected void Page_Load(object sender, EventArgs e)
    {
        string str = "[";
        List<string> list = GetCLCAll();
        foreach (string item in list)
        {
            str += "'" + item + "',";
        }
        str = str.Substring(0, str.Length - 1);//去掉最后一个逗号
        str += "]";
        tip = str;

}

    public List<string> GetCLCAll()
    {
        List<string> list = new List<string>();
        string sql = "select * from testTable";
        string ACCESS_CONN_STRING = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source="
            + " D://AJAX测试//test.mdb ;User Id=admin;Password=;";
        try
        {
            using (OleDbConnection access_conn = new OleDbConnection(ACCESS_CONN_STRING))
            {
                OleDbCommand access_cmd = new OleDbCommand(sql, access_conn);
                access_conn.Open();
                OleDbDataAdapter da = new OleDbDataAdapter(access_cmd);
                DataTable table = new DataTable();
                da.Fill(table);
                foreach (DataRow row in table.Rows)
                {
                    list.Add((string)row["name"]);
                }
                access_conn.Close();
            }
        }
        catch (Exception)
        {
            throw;
        }
        return list;
    }
}
注：书数据是从Access数据库中读取的，可以自己创建一个Access数据库