JS实现的一个简单的Autocomplete自动完成例子_Javascript教程-查字典教程网
JS实现的一个简单的Autocomplete自动完成例子
JS实现的一个简单的Autocomplete自动完成例子
发布时间:2016-12-30 来源:查字典编辑
摘要:分享一篇无意间发现的自动完成源码。这里测试的时候使用的是数组,实际使用的时候,我们换成Ajax从服务器端获取的方式就OK了。提示:可以直接保...

分享一篇无意间发现的自动完成源码。这里测试的时候使用的是数组,实际使用的时候,我们换成Ajax从服务器端获取的方式就OK了。

提示:可以直接保存到一个html文件中查看效果。

复制代码 代码如下:

<!doctype html>

<html>

<style>

body {

margin-left: 0px;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

}

.auto_hidden {

width:204px;border-top: 1px solid #333;

border-bottom: 1px solid #333;

border-left: 1px solid #333;

border-right: 1px solid #333;

position:absolute;

display:none;

}

.auto_show {

width:204px;

border-top: 1px solid #333;

border-bottom: 1px solid #333;

border-left: 1px solid #333;

border-right: 1px solid #333;

position:absolute;

z-index:9999; /* 设置对象的层叠顺序 */

display:block;

}

.auto_onmouseover{

color:#ffffff;

background-color:highlight;

width:100%;

}

.auto_onmouseout{

color:#000000;

width:100%;

background-color:#ffffff;

}

</style>

<script language="javascript">

<;

if(this.index<-1){

this.index=length - 1;

}else if(this.index==-1){

this.obj.value=this.search_value;

}

this.changeClassname(length);

}

//回车键

else if(event.keyCode==13){

this.autoObj.className="auto_hidden";

this.index=-1;

}else{

this.index=-1;

}

},

//程序入口

start: function(event){

if(event.keyCode!=13&&event.keyCode!=38&&event.keyCode!=40){

this.init();

this.deleteDIV();

this.search_value=this.obj.value;

var valueArr=this.value_arr;

valueArr.sort();

if(this.obj.value.replace(/(^s*)|(s*$)/g,'')==""){ return; }//值为空,退出

try{ var reg = new RegExp("(" + this.obj.value + ")","i");}

catch (e){ return; }

var div_index=0;//记录创建的DIV的索引

for(var i=0;i<valueArr.length;i++){

if(reg.test(valueArr[i])){

var div = document.createElement("div");

div.className="auto_onmouseout";

div.seq=valueArr[i];

div.onclick=this.setValue(this);

div.onmouseover=this.autoOnmouseover(this,div_index);

div.innerHTML=valueArr[i].replace(reg,"<strong>$1</strong>");//搜索到的字符粗体显示

this.autoObj.appendChild(div);

this.autoObj.className="auto_show";

div_index++;

}

}

}

this.pressKey(event);

window.onresize=Bind(this,function(){this.init();});

}

}

//-->

</SCRIPT>

<body>

<h1 align="center">自动完成函数(Autocomplete Function)</h1>

<div align="center"><input type="text" id="o" onkeyup="autoComplete.start(event)"></div>

<div id="auto"><></div>

<script>

var autoComplete=new AutoComplete('o','auto',['b0','b12','b22','b3','b4','b5','b6','b7','b8','b2','abd','ab','acd','accd','b1','cd','ccd','cbcv','cxf']);

</SCRIPT>

</body>

</html>

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类