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

2024-07-10 12:39:05

字体：大中小

来源：转载

供稿：网友

效果图：

功能：
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");

上一篇：asp.net 票据简单应用

下一篇：asp.net显示页面执行时间