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

ASP.NET
使用函数传递参数来执行相应的数据库操作
如何实现在窗体和窗体之间进行传递数据
ASP.NET中文显示之两种解决方法
ASP.NET、JSP及PHP之间的抉择
ASP.NET 2.0发送电子邮件中存在的问题
谈谈HtmlControl与WebControl的区别与用途
从ASP.NET 1.1升级到ASP.NET 2.0要考虑的Cookie问题
通过系统配置来提高ASP.NET应用程序的稳定性
妙用ASP2.0中的URL映射改变网址
AJAX实现web页面中级联菜单的设计
ASP.NET跨页面传值技巧总结
再议ASP.NET DataGrid控件中的“添加新行”功能
Geometry 对象浅析
重构CollapsibleSplitter
如何利用.NET Framework使用RSS feed
ASP.NET获取IP与MAC地址的方法
在ASP.NET 2.0中使用样式、主题和皮肤
ASP.NET中为GridView添加删除提示框
ASP.NET 2.0,无刷新页面新境界
看看一个.net版对话框控件

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-13   浏览: 68 ::
收藏到网摘: 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