前台页面代码:
<%@ 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' οnkeyup='getSearchKeys()' />
<div id='divShow' style="position: absolute; z-index: 9999; width: 200px; height: auto;
display: none; border: 1px solid #ddd">
</div>
</body>
<script type="text/javascript">
var keys=<%=tip%>; //从数据中读取数据
var txtInput ;
var divShow ;
window.οnlοad=function()
{
txtInput =document.getElementById("txtInput");
divShow = document.getElementById("divShow");
var p =getAbsPoint(txtInput);
divShow.style.left = p.x +'px';
divShow.style.top = p.y + txtInput.offsetHeight + 'px';
txtInput.onclick = divShow.οnclick=function(e)
{
e = e||event;
var t = e.target||e.srcElement
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.οnclick=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";
}
}
function getAbsPoint(e)
{
var x = e.offsetLeft;
var y = e.offsetTop;
while(e = e.offsetParent)
{
x += e.offsetLeft;
y += e.offsetTop;
}
return {"x": x, "y": y};
}
</script>
</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数据库