代码部分:一。CSS部分
<
style
>
.spancss { BACKGROUND - COLOR: #d3d3d3 }
.search_suggest { BORDER - RIGHT: #a9a9a9 1px solid; PADDING - RIGHT: 0px; BORDER - TOP: 0px solid; PADDING - LEFT: 0px; FONT - SIZE: x - small; PADDING - BOTTOM: 0px; MARGIN: 0px; BORDER - LEFT: #a9a9a9 1px solid; WIDTH: 155px; PADDING - TOP: 0px; BORDER - BOTTOM: #a9a9a9 1px solid; FONT - FAMILY: 宋体; POSITION: absolute; HEIGHT: 50px; BACKGROUND - COLOR: white }
.suggest_hidden { DISPLAY: none }
</ style >
.spancss { BACKGROUND - COLOR: #d3d3d3 }
.search_suggest { BORDER - RIGHT: #a9a9a9 1px solid; PADDING - RIGHT: 0px; BORDER - TOP: 0px solid; PADDING - LEFT: 0px; FONT - SIZE: x - small; PADDING - BOTTOM: 0px; MARGIN: 0px; BORDER - LEFT: #a9a9a9 1px solid; WIDTH: 155px; PADDING - TOP: 0px; BORDER - BOTTOM: #a9a9a9 1px solid; FONT - FAMILY: 宋体; POSITION: absolute; HEIGHT: 50px; BACKGROUND - COLOR: white }
.suggest_hidden { DISPLAY: none }
</ style >
二。Script脚本部分
<
script
>
var xmlhttprequest;
function getmessage(handler) // 创建 xmlhttp对象
{
var xmlhttp;
try {
xmlhttp = new XMLHTTPRequest();
xmlhttp.onload = handler;
xmlhttp.onerror = handler;
return xmlhttp;
}
catch (e)
{
try {
xmlhttp = new ActiveXObject( " Microsoft.XMLHTTP " );
xmlhttp.onreadystatechange = handler;
return xmlhttp;
}
catch (e)
{
alert( " not open object " + e.message);
return false ;
}
}
}
var code = "" ; // 文本框中的全部字符串
var str; // 截取输入前的字符串
var len; // 获取输入的字符串
var downcount = 0 ; // 记录向下键点击次数
var upcount = 0 ; // 记录向上键点击次数
var ctrlcount = 0 ; // 记录Ctrl键 点击次数
var zhcount = 0 ; // 统计中文切换后 敲击的空格
function keyup() // 键盘弹起事件时执行的方法,能够处理 英文,中文
{
var s =/^[\u4e00-\u9fa5]+$/ ; // 创建 中文过滤器
str = event.srcElement.value.substring( 0 ,code.length);
len = event.srcElement.value.substring(str.length); // 通过截取获得刚输入的字符
if (event.keyCode >= 65 && event.keyCode <= 122 ) // 判断输入的是否是字母
{
code = code + String.fromCharCode(event.keyCode); // 将字 ASCII码转换成字符
sendpress(code); // 向服务器发送 并处理返回结果
}
else if (len.match(s)) // 获取中文字符
{
var value = len.replace( /[^\u4E00-\u9FA5]/g ); // 将输入的字符转换成汉字
code = code + value;
zhcount ++ ; // 切换输入法后输入空格的个数
sendpress(code); // 向服务器发送数据并返回结果
}
if (event.keyCode == 17 ) // 触发ctrl事件
{
ctrlcount = 1 ; // 设置CTRL的默认值
return ;
}
if (event.keyCode == 8 ) // 触发回退事件
{
backpress(code);
return ;
}
if (event.keyCode == 32 ) // 触发 空格 事件
{
spacepress(code);
return ;
}
if (event.keyCode == 38 ) // 触发 向上键事件
{
uppress(downcount);
return ;
}
if (event.keyCode == 40 ) // 触发 向下键事件
{
downpress(downcount);
return ;
}
}
function divonblur() // 触发此事件,使DIV失去焦点
{
var onblur_event = event.srcElement; // 获得触发此事件的DIV
var onblur_parent = onblur_event.parentElement.parentElement; // 获得其父级DIV
if (onblur_parent.tagName == " TR " ) // 筛选出父级DIV
onblur_event.attributes[ " class " ].value = " suggest_hidden " ; // 隐藏
else
return ;
}
function mouseover() // SPAN中悬停事件
{
var mouse_event = event.srcElement; // 获取触发事件的 SPAN
var mouse_parent = mouse_event.parentElement; // 获取其父级DIV
mouse_parent.attributes[ " class " ].value = " spancss " ; // 为其父级DIV添加背景CSS
document.getElementById( " seach " ).innerText = mouse_event.innerText; // 为文本框赋值
mouse_parent.parentElement.focus(); // 获得焦点
return ;
}
function mouseout() // SPAN中移开事件
{
var mouse_event = event.srcElement; // 触发此事件的DIV
var mouse_parent = mouse_event.parentElement; // 获得其父级DIV
mouse_parent.attributes[ " class " ].value = "" ; // 重置背景
return ;
}
function uppress(upcode) // 向上 键盘 事件
{
downcount -- ; // 上移
var search = document.getElementById( " seachlist " ); // 获得容器 DIV
var textvalue = document.getElementById( " seach " ); //
for ( var j = search.children.length - 1 ;j >= 0 ;j -- )
{
if (downcount ==- 1 ) // 如果超出列表范围 从下方进入
{ downcount = search.children.length - 1 ; // 重新初始化 downcount
search.children[ 0 ].attributes[ " class " ].value = "" ; // 取消第一行DIV的背景色
}
else
search.children[j].attributes[ " class " ].value = "" ; // 重置CSS
if (downcount == j)
{
search.children[j].attributes[ " class " ].value = " spancss " ; // 设置DIV背景色
textvalue.innerText = search.children[j].children[ 0 ].innerText; // 为文本框赋值
return ;
}
}
}
function downpress(downcode) // 按向下箭头触发的事件
{
var search = document.getElementById( " seachlist " ); // 获得容器DIV
for ( var num = 0 ;num < search.children.length;num ++ ) // 遍历容器DIV
{
if (downcode == num) // 判断当前位置
{
downcount ++ ; // 下移
search.children[num].attributes[ " class " ].value = " spancss " ; // 设置背景色
if (num == search.children.length - 1 ) // 判断是否到达底部 如到达底部对其进行截取空格
{
document.getElementById( " seach " ).innerText = search.children[num].children[ 0 ].innerText.substring( 0 ,search.children[num].children[ 0 ].innerText.length - 1 );
return ;
}
else
{
document.getElementById( " seach " ).innerText = search.children[num].children[ 0 ].innerText;
return ;
}
}
else
{
search.children[num].attributes[ " class " ].value = "" ; // 重置当前背景色
}
}
downcount = 0 ; // 位置指针指向容器 DIV的首行
}
function spacepress(spacecode) // 按下空格时code 长度增加
{ if (zhcount == 0 )
{
if (ctrlcount == 0 ) // 判断输入法是否按 CTRl键
{
code = spacecode + " " ; // 当在文本框中输入空格时 总值迎加上空格值
sendpress(code);
}
else
{
ctrlcount = 0 ; // 恢复默认
}
}
else // 如果切换输入法后输入
{
sendpress(spacecode);
zhcount = 0 ;
}
}
function backpress(backcode) // 按回退键时 发生的事件
{
var strcode = backcode.substring(backcode.substring( 0 ,backcode.length - 2 ).length);
// 截取最后两位
if (strcode.match( /^[\u4e00-\u9fa5]+$/ )) // 判断截取后是否是中文
code = code.substring( 0 ,code.length - 2 );
else if (strcode.match( /^ [A - Za - z] + $ / ))
code = code.substring( 0 ,code.length - 1 ); // 如不是则截取一位
else
code = code.substring( 0 ,code.length - 1 ); // 其他情况也截取一位
if (code)
{
sendpress(code); // 向服务器提交数据
}
}
function divcss() // 空数据时层的显示和隐藏
{
// 判断SPAN中的内容
if (document.getElementById( " seachlist " ).children[ 0 ].children[ 0 ].innerHTML != "" )
{
document.getElementById( " seachlist " ).attributes[ " class " ].value = " search_suggest " ;
}
else
{
document.getElementById( " seachlist " ).attributes[ " class " ].value = " suggest_hidden " ;
// 隐藏父级DIV
return ;
}
}
function sendpress(sendcode) // 向服务器发送 并接收 数据
{
var url = " WebForm8.aspx?param=1 " ;
xmlhttprequest = getmessage(showlist); // 实例化 XMLHTTP 对象
xmlhttprequest.open( " GET " ,url, true ); // 打开连接
xmlhttprequest.send(sendcode); // 向服务器发送数据
}
function showlist() // onreadystatechange 事件执行的方法
{
if (xmlhttprequest.readyState == 4 || xmlhttprequest.readyState == " complete " )
{
// 判断状态
document.getElementById( " seachlist " ).innerHTML = "" ; // 向容器DIV添加元素
var httptext = xmlhttprequest.responseText; // 获取服务器返回字符串
var strtext = httptext.substring( 0 ,httptext.indexOf( ' < ' )); // 获取服务器发送过来的文本
var arry = new Array();
arry = strtext.split( ' , ' );
for ( var i = 0 ;i < arry.length;i ++ ) // 对其进行遍历
{
var div = document.createElement( " DIV " ); // 创建子DIV
div.id = i; // 设定ID
div.onblur = divonblur; // 添加失去焦点事件
div.innerHTML = " <SPAN οnmοuseοver='mouseover();' οnmοuseοut='mouseout();'> " + arry[i] + " </SPAN></br> " ;
// 创建SPAN添加到子容器DIV中
document.getElementById( " seachlist " ).appendChild(div);
// 将子容器挂载到父容器中
}
divcss(); // 判断是否隐藏
}
}
</ script >
var xmlhttprequest;
function getmessage(handler) // 创建 xmlhttp对象
{
var xmlhttp;
try {
xmlhttp = new XMLHTTPRequest();
xmlhttp.onload = handler;
xmlhttp.onerror = handler;
return xmlhttp;
}
catch (e)
{
try {
xmlhttp = new ActiveXObject( " Microsoft.XMLHTTP " );
xmlhttp.onreadystatechange = handler;
return xmlhttp;
}
catch (e)
{
alert( " not open object " + e.message);
return false ;
}
}
}
var code = "" ; // 文本框中的全部字符串
var str; // 截取输入前的字符串
var len; // 获取输入的字符串
var downcount = 0 ; // 记录向下键点击次数
var upcount = 0 ; // 记录向上键点击次数
var ctrlcount = 0 ; // 记录Ctrl键 点击次数
var zhcount = 0 ; // 统计中文切换后 敲击的空格
function keyup() // 键盘弹起事件时执行的方法,能够处理 英文,中文
{
var s =/^[\u4e00-\u9fa5]+$/ ; // 创建 中文过滤器
str = event.srcElement.value.substring( 0 ,code.length);
len = event.srcElement.value.substring(str.length); // 通过截取获得刚输入的字符
if (event.keyCode >= 65 && event.keyCode <= 122 ) // 判断输入的是否是字母
{
code = code + String.fromCharCode(event.keyCode); // 将字 ASCII码转换成字符
sendpress(code); // 向服务器发送 并处理返回结果
}
else if (len.match(s)) // 获取中文字符
{
var value = len.replace( /[^\u4E00-\u9FA5]/g ); // 将输入的字符转换成汉字
code = code + value;
zhcount ++ ; // 切换输入法后输入空格的个数
sendpress(code); // 向服务器发送数据并返回结果
}
if (event.keyCode == 17 ) // 触发ctrl事件
{
ctrlcount = 1 ; // 设置CTRL的默认值
return ;
}
if (event.keyCode == 8 ) // 触发回退事件
{
backpress(code);
return ;
}
if (event.keyCode == 32 ) // 触发 空格 事件
{
spacepress(code);
return ;
}
if (event.keyCode == 38 ) // 触发 向上键事件
{
uppress(downcount);
return ;
}
if (event.keyCode == 40 ) // 触发 向下键事件
{
downpress(downcount);
return ;
}
}
function divonblur() // 触发此事件,使DIV失去焦点
{
var onblur_event = event.srcElement; // 获得触发此事件的DIV
var onblur_parent = onblur_event.parentElement.parentElement; // 获得其父级DIV
if (onblur_parent.tagName == " TR " ) // 筛选出父级DIV
onblur_event.attributes[ " class " ].value = " suggest_hidden " ; // 隐藏
else
return ;
}
function mouseover() // SPAN中悬停事件
{
var mouse_event = event.srcElement; // 获取触发事件的 SPAN
var mouse_parent = mouse_event.parentElement; // 获取其父级DIV
mouse_parent.attributes[ " class " ].value = " spancss " ; // 为其父级DIV添加背景CSS
document.getElementById( " seach " ).innerText = mouse_event.innerText; // 为文本框赋值
mouse_parent.parentElement.focus(); // 获得焦点
return ;
}
function mouseout() // SPAN中移开事件
{
var mouse_event = event.srcElement; // 触发此事件的DIV
var mouse_parent = mouse_event.parentElement; // 获得其父级DIV
mouse_parent.attributes[ " class " ].value = "" ; // 重置背景
return ;
}
function uppress(upcode) // 向上 键盘 事件
{
downcount -- ; // 上移
var search = document.getElementById( " seachlist " ); // 获得容器 DIV
var textvalue = document.getElementById( " seach " ); //
for ( var j = search.children.length - 1 ;j >= 0 ;j -- )
{
if (downcount ==- 1 ) // 如果超出列表范围 从下方进入
{ downcount = search.children.length - 1 ; // 重新初始化 downcount
search.children[ 0 ].attributes[ " class " ].value = "" ; // 取消第一行DIV的背景色
}
else
search.children[j].attributes[ " class " ].value = "" ; // 重置CSS
if (downcount == j)
{
search.children[j].attributes[ " class " ].value = " spancss " ; // 设置DIV背景色
textvalue.innerText = search.children[j].children[ 0 ].innerText; // 为文本框赋值
return ;
}
}
}
function downpress(downcode) // 按向下箭头触发的事件
{
var search = document.getElementById( " seachlist " ); // 获得容器DIV
for ( var num = 0 ;num < search.children.length;num ++ ) // 遍历容器DIV
{
if (downcode == num) // 判断当前位置
{
downcount ++ ; // 下移
search.children[num].attributes[ " class " ].value = " spancss " ; // 设置背景色
if (num == search.children.length - 1 ) // 判断是否到达底部 如到达底部对其进行截取空格
{
document.getElementById( " seach " ).innerText = search.children[num].children[ 0 ].innerText.substring( 0 ,search.children[num].children[ 0 ].innerText.length - 1 );
return ;
}
else
{
document.getElementById( " seach " ).innerText = search.children[num].children[ 0 ].innerText;
return ;
}
}
else
{
search.children[num].attributes[ " class " ].value = "" ; // 重置当前背景色
}
}
downcount = 0 ; // 位置指针指向容器 DIV的首行
}
function spacepress(spacecode) // 按下空格时code 长度增加
{ if (zhcount == 0 )
{
if (ctrlcount == 0 ) // 判断输入法是否按 CTRl键
{
code = spacecode + " " ; // 当在文本框中输入空格时 总值迎加上空格值
sendpress(code);
}
else
{
ctrlcount = 0 ; // 恢复默认
}
}
else // 如果切换输入法后输入
{
sendpress(spacecode);
zhcount = 0 ;
}
}
function backpress(backcode) // 按回退键时 发生的事件
{
var strcode = backcode.substring(backcode.substring( 0 ,backcode.length - 2 ).length);
// 截取最后两位
if (strcode.match( /^[\u4e00-\u9fa5]+$/ )) // 判断截取后是否是中文
code = code.substring( 0 ,code.length - 2 );
else if (strcode.match( /^ [A - Za - z] + $ / ))
code = code.substring( 0 ,code.length - 1 ); // 如不是则截取一位
else
code = code.substring( 0 ,code.length - 1 ); // 其他情况也截取一位
if (code)
{
sendpress(code); // 向服务器提交数据
}
}
function divcss() // 空数据时层的显示和隐藏
{
// 判断SPAN中的内容
if (document.getElementById( " seachlist " ).children[ 0 ].children[ 0 ].innerHTML != "" )
{
document.getElementById( " seachlist " ).attributes[ " class " ].value = " search_suggest " ;
}
else
{
document.getElementById( " seachlist " ).attributes[ " class " ].value = " suggest_hidden " ;
// 隐藏父级DIV
return ;
}
}
function sendpress(sendcode) // 向服务器发送 并接收 数据
{
var url = " WebForm8.aspx?param=1 " ;
xmlhttprequest = getmessage(showlist); // 实例化 XMLHTTP 对象
xmlhttprequest.open( " GET " ,url, true ); // 打开连接
xmlhttprequest.send(sendcode); // 向服务器发送数据
}
function showlist() // onreadystatechange 事件执行的方法
{
if (xmlhttprequest.readyState == 4 || xmlhttprequest.readyState == " complete " )
{
// 判断状态
document.getElementById( " seachlist " ).innerHTML = "" ; // 向容器DIV添加元素
var httptext = xmlhttprequest.responseText; // 获取服务器返回字符串
var strtext = httptext.substring( 0 ,httptext.indexOf( ' < ' )); // 获取服务器发送过来的文本
var arry = new Array();
arry = strtext.split( ' , ' );
for ( var i = 0 ;i < arry.length;i ++ ) // 对其进行遍历
{
var div = document.createElement( " DIV " ); // 创建子DIV
div.id = i; // 设定ID
div.onblur = divonblur; // 添加失去焦点事件
div.innerHTML = " <SPAN οnmοuseοver='mouseover();' οnmοuseοut='mouseout();'> " + arry[i] + " </SPAN></br> " ;
// 创建SPAN添加到子容器DIV中
document.getElementById( " seachlist " ).appendChild(div);
// 将子容器挂载到父容器中
}
divcss(); // 判断是否隐藏
}
}
</ script >
三。HTML表单部分
<
body
MS_POSITIONING
="GridLayout"
>
< form id ="Form1" method ="post" runat ="server" >
< table width ="100%" >
< tr height ="5%" >
< td style ="HEIGHT: 5%" >
< asp:textbox id ="seach" runat ="server" autocomplete ="off" CssClass ="txt" ></ asp:textbox >
< input id ="btn_seach" type ="button" value ="快速搜索" >< br >
< div id ="seachlist" onblur ="divonblur()" ></ div >
</ td >
</ tr >
</ table >
</ form >
</ body >
< form id ="Form1" method ="post" runat ="server" >
< table width ="100%" >
< tr height ="5%" >
< td style ="HEIGHT: 5%" >
< asp:textbox id ="seach" runat ="server" autocomplete ="off" CssClass ="txt" ></ asp:textbox >
< input id ="btn_seach" type ="button" value ="快速搜索" >< br >
< div id ="seachlist" onblur ="divonblur()" ></ div >
</ td >
</ tr >
</ table >
</ form >
</ body >
四。服务器端代码
private
SqlConnection con;
private DataTable tab;
private SqlDataAdapter sa;
private void Page_Load( object sender, System.EventArgs e)
... {
this.seach.Attributes.Add("onkeyup","keyup()");
if(Request.QueryString["param"]!=null)
...{
BinaryReader br = new BinaryReader(Request.InputStream);
byte [] b = new byte[Request.InputStream.Length];
br.Read(b,0,b.Length);
char []c = Encoding.UTF8.GetChars(b);
string str = new string(c);
string strparam = getmessage(str);
if(strparam!="")
Response.Write(strparam);
}
// 在此处放置用户代码以初始化页面
}
private string getmessage( string message)
... {
string str ="";
if(con==null)
con = new SqlConnection("Server=(local);Database=pubs;uid=;pwd=");
sa = new SqlDataAdapter("select message from messages where message
like '"+message+"%'",con);
dt = new DataSet();
sa.Fill(dt,"message");
tab = dt.Tables[0];
for(int i=0;i<tab.Rows.Count;i++)
...{
if(i==tab.Rows.Count-1)
str+=tab.Rows[i][0].ToString();
else
str+=tab.Rows[i][0].ToString()+",";
}
return str;
}
private DataTable tab;
private SqlDataAdapter sa;
private void Page_Load( object sender, System.EventArgs e)
... {
this.seach.Attributes.Add("onkeyup","keyup()");
if(Request.QueryString["param"]!=null)
...{
BinaryReader br = new BinaryReader(Request.InputStream);
byte [] b = new byte[Request.InputStream.Length];
br.Read(b,0,b.Length);
char []c = Encoding.UTF8.GetChars(b);
string str = new string(c);
string strparam = getmessage(str);
if(strparam!="")
Response.Write(strparam);
}
// 在此处放置用户代码以初始化页面
}
private string getmessage( string message)
... {
string str ="";
if(con==null)
con = new SqlConnection("Server=(local);Database=pubs;uid=;pwd=");
sa = new SqlDataAdapter("select message from messages where message
like '"+message+"%'",con);
dt = new DataSet();
sa.Fill(dt,"message");
tab = dt.Tables[0];
for(int i=0;i<tab.Rows.Count;i++)
...{
if(i==tab.Rows.Count-1)
str+=tab.Rows[i][0].ToString();
else
str+=tab.Rows[i][0].ToString()+",";
}
return str;
}