仿google智能下拉ajax非插件

最新推荐文章于 2023-12-21 15:59:58 发布

飞鸟flyboy

最新推荐文章于 2023-12-21 15:59:58 发布

阅读量231

点赞数

分类专栏： c#

本文链接：https://blog.csdn.net/a5251199/article/details/49796495

版权

c# 专栏收录该内容

105 篇文章 2 订阅

订阅专栏

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>阿里西西特效演示页仿Google搜索搜索文本框智能提示特效代码</title>
<style>
.focus{background-color:blue;color:White}
.unfocus{background-color:White;color:Black}
</style>
<script type="text/javascript">
var obj;
var to;//setTimeout时间变量，对于输入快时可以延迟查询
var Ext="asp";//更换为asp/asp.net/php也是修改这里的文件后缀名就可以了
var dirPath="";//如果更换过路径，注意路径也要修改
function $(id){return document.getElementById(id);}
function getD(e,va){
  e=e||event;
  if(e.keyCode==38||e.keyCode==40||e.keyCode==13)return;
  if(to) clearTimeout(to);
  to=setTimeout("getData('"+va+"')",500);//延迟500毫秒后再查询
}
function getData(va){
  $('dvContent').style.display="none";
  if(va!=""){//注意这个要编码关键字，要不出现中文在服务器端获取不到,php需要encodeURIComponent来编码，asp和aspnet需要escape
    var url=dirPath+'read.'+Ext+'?ts='+new Date().getTime()+'&k='+(Ext=="php"?encodeURIComponent(va):escape(va));

    obj=CreateAJAX();
    if(obj){
      obj.onreadystatechange=handlejs;
      obj.open('get',url,true);
      obj.send(null);
    }
    else alert("创建AJAX对象失败！");
  }
}
function handlejs(){
   if(obj.readyState==4){
      if(obj.status==200){
            xml=obj.responseXML;
            node=xml.getElementsByTagName("data");
            if(node.length!=0){//如果d节点的子节点不为0,则取数据
              var dv=$("dvContent");
              dv.innerHTML=node[0].firstChild.nodeValue;
              dv.style.display="block";
          CurrentIndex=-1;//重新设置焦点项
            }
      }
      else  alert("请求的文件出错，请检查！");
   }
}
function CreateAJAX(){
  if(typeof(XMLHttpRequest)!="undefined")return new XMLHttpRequest();
  if(window.ActiveXObject){
     var objs=["MSXML2.XMLHttp.5.0","MSXML2.XMLHttp.4.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp","Microsoft.XMLHTTP"];
     var xmlhttp;
     for(var i=0;i<objs.length;i++){
       try{
         xmlhttp=new ActiveXObject(objs[i]);return xmlhttp;
       }
       catch(e){
         //do nothing
       }
     }
   }
}
function setContent(data,IsKey){
  $('kw').value=data;
  if(!IsKey){
    $('dvContent').style.display="none";
    CurrentIndex=-1;
  }
}
function setPosition(){
  var dv=$('dvContent');
  dv.style.left=getPos("x");
  dv.style.top=getPos("y")+$('kw').offsetHeight+1;
  dv.style.width=$('kw').offsetWidth;
}
function getPos(type){
  var p;
  var o=$('kw');
  if(type=="x")p=o.offsetLeft;
  else p=o.offsetTop;
  while(o=o.offsetParent){
    if (type=="x") p+=o.offsetLeft;
    else p+=o.offsetTop;
  }
  return p;
}
var CurrentIndex=-1;
document.οnkeydοwn=function(e){
  e=e||event;
  var DC=$("dvContent");
  if(DC.style.display=="none")return;//不显示时不响应按键
  var items=DC.getElementsByTagName("div");
  var itemLength=items.length;
  if(itemLength<1) return;//没有匹配的内容时不响应按键

  if(items[CurrentIndex])items[CurrentIndex].className="unfocus";
  if(e.keyCode==38){//上
    if(CurrentIndex==-1) CurrentIndex=0;
    else CurrentIndex--;
    if(CurrentIndex<0)  CurrentIndex=itemLength-1;
  }
  else if(e.keyCode==40){//下
    if(CurrentIndex==-1) CurrentIndex=0;
    else CurrentIndex++;
    if(CurrentIndex>itemLength-1)CurrentIndex=0;
  }
  else if(e.keyCode==13)setContent(items[CurrentIndex].innerHTML);
  if(CurrentIndex!=-1){
     items[CurrentIndex].className="focus";
     setContent(items[CurrentIndex].innerHTML,true);
  }
}

</script>
</head>
<body οnlοad="setPosition()">
<h1>仿Google搜索搜索文本框智能提示特效代码</h1>
<br /><br /><br />
智能搜索：<input type="text" style="width:300px" id="kw" name="kw" οnkeyup="getD(event,this.value)"/><br/>
<div id="dvContent" style="display:none;position:absolute;border:solid 1px black;"></div><br />
请尝试输入 www.alixixi.com 或阿里西西。更多特效代码请访问：<a href="http://js.alixixi.com">http://js.alixixi.com</a>
</body>
</html>

飞鸟flyboy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
仿google智能下拉ajax非插件

阿里西西特效演示页仿Google搜索搜索文本框智能提示特效代码 .focus{background-color:blue;color:White} .unfocus{background-color:White;color:Black} var obj;var to;//setTimeout时间变量，对于输入快时可以延迟查询var Ext="asp";//更换为
复制链接

扫一扫