当前位置: 首页 > 图文教程 > 网络编程 > ASP.NET > asp.net+js实现的ajax sugguest搜索提示效果

ASP.NET
FreeTextBox(版本3.1.6)在ASP.Net 2.0中使用方法
.NET 常用功能和代码小结
在 .NET Framework 2.0 中未处理的异常导致基于 ASP.NET 的应用程序意外退出
asp.net IList查询数据后格式化数据再绑定控件
asp.net sql存储过程
asp.net 简单实现禁用或启用页面中的某一类型的控件
asp.net(c#)获取内容第一张图片地址的函数
The remote procedure call failed and did not execute的解决办法
ASP.NET 在线文件管理
asp.net 读取并修改config文件实现代码
ASP.NET Cookie 操作实现
asp.net Silverlight中的模式窗体
Silverlight中动态获取Web Service地址
asp.net Silverlight应用程序中获取载体aspx页面参数
asp.net 水晶报表隔行换色实现方法
asp.net 获取Gridview隐藏列的值
手动把asp.net的类生成dll文件的方法
asp.net 使用ObjectDataSource控件在ASP.NET中实现Ajax真分页
动态指定任意类型的ObjectDataSource对象的查询参数
asp.net Md5的用法小结

ASP.NET 中的 asp.net+js实现的ajax sugguest搜索提示效果


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-13   浏览: 80 ::
收藏到网摘: n/a

阿会楠根据网上一份原作者不详的代码进行了修改,以适合自己的项目并增加了多个功能。此次放出的代码为基本实现代码,也是最接近原来的代码,略去其他功能。版权归原作者所有。 效果图:

功能:
1、可以有方向键上下控制。
2、支持关键字高亮。(在该此次代码中省略)
3、对选中可按回车提交。

使用
:重点关注id=tbxsearch和id=search_suggest这两个东东。html部分涉及到定位的问题,自己处理好,有问题可以提问,细节自己把握。
注明:在接收的那个文件,其实应该接收一个参数skey的,我先写死了。记得接收的时候先解码一次。
申明
:阿会楠根据网上一份原作者不详的代码进行了修改,以适合自己的项目并增加了多个功能。此次放出的代码为基本实现代码,也是最接近原来的代码,略去其他功能。版权归原作者所有。
复制代码 代码如下:

document.writeln(" <div style=\"position:relative;margin-left:100px;margin-top:100px;\">");
document.write("<input id='tbxsearch' value='' type='text' maxlength='100' onkeyup='suggest(event,this)' onblur='inputOnblur()' \/>");
document.write("<div id=\"search_suggest\" class=\"suggest\" style=\"display:none;\"><\/div><\/div>");
document.write("<style style=\"text/css\">");
document.write("body,input{font:12px tahoma;}");
document.write("#tbxsearch{width:250px;}");
document.write(".suggest{position:absolute;+left:6px;top:23px;z-index:999;background:#fff;width:250px;text-align:left;border:1px solid #000;height:auto!important;height:20px;min-height:20px;clear:both;}");
document.write(".suggestOver{background:#3366CC;padding:2px 0 2px 0;color:white;}");
document.write("<\/style>");
var $=function(Id){
return document.getElementById(Id)?document.getElementById(Id):null;
};
var $ctag=function(tagName){
return document.createElement(tagName);
};
var $ajax=function createXMLHttpRequest(){
var xmlHttp=false;
try{
xmlHttp = new XMLHttpRequest();
}
catch(trymicrosoft){
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch(othermicrosoft){
try{xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")}
catch(failed){}
}
}
return xmlHttp;
};
var suggestDiv=$("search_suggest");
var keynodes;
var lastKey="";
var selectedIndex=0;
var showSuggest=function(inputObj){
var xmlHttp = $ajax();
var key=document.getElementById("tbxsearch").value;
if(key==lastKey)return false;
else lastkey=key;
if(/^\s*$/.test(key)){
suggestDiv.style.display="none";
return false;
};
selectedIndex=-1;
xmlHttp.open("get","js/search.aspx?skey="+encodeURI(key)+"&t=" + new Date().getTime(),true);
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState == 4&&xmlHttp.status == 200){
var xmldoc=xmlHttp.responseXML;
keynodes=xmldoc.getElementsByTagName("key");
if(keynodes.length>0)
{
suggestDiv.innerHTML="";
for(var i=0;i<keynodes.length;i++){
var keyDiv=$ctag("div");
keyDiv.style.width="100%";
keyDiv.style.padding="0";
keyDiv.style.margin="2px 0 2px 0";
keyDiv.style.height="18px";
keyDiv.style.lineHeight="18px";
keyDiv.style.cursor="default";
keyDiv.style.textIndent = "4px";
keyDiv.innerHTML = keynodes[i].getAttribute("value");
keyDiv.onmouseover=function(){
selectedIndex=-1;
divlist=suggestDiv.getElementsByTagName("div");
for(var k=0;k<divlist.length;k++){
divlist[k].className="";
if(divlist[k]==this)selectedIndex=k;
}
this.className="suggestOver";
};
keyDiv.onmouseout=function(){
this.className="";
};
keyDiv.onmousedown = function(){
document.getElementById("tbxsearch").value=this.innerHTML;
//这里写执行搜索的代码
};
suggestDiv.appendChild(keyDiv);
};
suggestDiv.style.display="block";
}else{
suggestDiv.style.display="none";
}
}
};
xmlHttp.send(null);
};
var changeSelect=function(isUp,inputObj){
if (isUp) selectedIndex++;
else selectedIndex--;
if(selectedIndex<0) selectedIndex=0;
var divlist=suggestDiv.getElementsByTagName("div");
if(selectedIndex>=divlist.length)
selectedIndex=divlist.length-1;
for(var i=0;i<divlist.length;i++){
if(i==selectedIndex){
divlist[i].className="suggestOver";
inputObj.value=divlist[i].innerHTML.replace(/<[^>]+>/g,"");
}else{
divlist[i].className="";
}
}
};
var suggest=function(event,inputObj){
event = event ? event : (window.event ? window.event : null);
var keyCode=event.keyCode;
if(keyCode==13){
if(selectedIndex != -1){
inputObj.value=keynodes[selectedIndex].getAttribute("value");
}
//这里写执行搜索
}
if(keyCode==40||keyCode==38){
var isUp=false;
if(keyCode==40) {isUp=true;}
changeSelect(isUp,inputObj);
}else{
showSuggest(inputObj);
}

};
var inputOnblur=function(){setTimeout('suggestDiv.style.display="none";',100);};

search.aspx代码:
复制代码 代码如下:

<%@ Page Language="C#" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
Response.ContentType = "text/xml";
Response.ContentEncoding = Encoding.GetEncoding("utf-8");
Response.Write("<?xml version=\"1.0\" encoding=\"utf-8\"?>\n");
Response.Write("<keylit>");
Response.Write("\t<key value=\"阿会楠一直在坚持走自己的路\" />\n");
Response.Write("\t<key value=\"阿会楠今年25岁了!\" />\n");
Response.Write("\t<key value=\"阿会楠现在在汕头!\" />\n");
Response.Write("\t<key value=\"阿会楠会回广州!\" />\n");
Response.Write("\t<key value=\"搜索吧是阿会楠在大学期间的作品之一!\" />\n");
Response.Write("\t<key value=\"sosuo8.com by ahuinan\" />\n");
Response.Write("</keylit>");
}
}
</script>

打包下载http://sh.ruanchen.com/00904/yuanma/ajaxsuggest.rar