JS实现简单的Autocomplete自动完成例子

分类：Javascript| 发布：佚名| 查看：206 | 发表时间：2014/7/17

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

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

代码如下:
view source
print?
001<!doctype html>
002<html>
003<style>
004body {
005    margin-left: 0px;
006    margin-top: 0px;
007    margin-right: 0px;
008    margin-bottom: 0px;
009}
010.auto_hidden {
011    width:204px;border-top: 1px solid #333;
012    border-bottom: 1px solid #333;
013    border-left: 1px solid #333;
014    border-right: 1px solid #333;
015    position:absolute;
016    display:none;
017}
018.auto_show {
019    width:204px;
020    border-top: 1px solid #333;
021    border-bottom: 1px solid #333;
022    border-left: 1px solid #333;
023    border-right: 1px solid #333;
024    position:absolute;
025    z-index:9999; /* 设置对象的层叠顺序 */
026    display:block;
027}
028.auto_onmouseover{
029    color:#ffffff;
030    background-color:highlight;
031    width:100%;
032}
033.auto_onmouseout{
034    color:#000000;
035    width:100%;
036    background-color:#ffffff;
037}
038</style>
039<script language="javascript">
040<!--
041var $ = function (id) {
042    return "string" == typeof id ? document.getElementById(id) : id;
043}
044var Bind = function(object, fun) {
045    return function() {
046        return fun.apply(object, arguments);
047    }
048}
049function AutoComplete(obj,autoObj,arr){
050    this.obj=$(obj);        //输入框
051    this.autoObj=$(autoObj);//DIV的根节点
052    this.value_arr=arr;        //不要包含重复值
053    this.index=-1;          //当前选中的DIV的索引
054    this.search_value="";   //保存当前搜索的字符
055}
056AutoComplete.prototype={
057    //初始化DIV的位置
058    init: function(){
059        this.autoObj.style.left = this.obj.offsetLeft + "px";
060        this.autoObj.style.top  = this.obj.offsetTop + this.obj.offsetHeight + "px";
061        this.autoObj.style.width= this.obj.offsetWidth - 2 + "px";//减去边框的长度2px 
062    },
063    //删除自动完成需要的所有DIV
064    deleteDIV: function(){
065        while(this.autoObj.hasChildNodes()){
066            this.autoObj.removeChild(this.autoObj.firstChild);
067        }
068        this.autoObj.className="auto_hidden";
069    },
070    //设置值
071    setValue: function(_this){
072        return function(){
073            _this.obj.value=this.seq;
074            _this.autoObj.className="auto_hidden";
075        }     
076    },
077    //模拟鼠标移动至DIV时，DIV高亮
078    autoOnmouseover: function(_this,_div_index){
079        return function(){
080            _this.index=_div_index;
081            var length = _this.autoObj.children.length;
082            for(var j=0;j<length;j++){
083                if(j!=_this.index ){     
084                    _this.autoObj.childNodes[j].className='auto_onmouseout';
085                }else{
086                    _this.autoObj.childNodes[j].className='auto_onmouseover';
087                }
088            }
089        }
090    },
091    //更改classname
092    changeClassname: function(length){
093        for(var i=0;i<length;i++){
094            if(i!=this.index ){     
095                this.autoObj.childNodes[i].className='auto_onmouseout';
096            }else{
097                this.autoObj.childNodes[i].className='auto_onmouseover';
098                this.obj.value=this.autoObj.childNodes[i].seq;
099            }
100        }
101    }
102    ,
103    //响应键盘
104    pressKey: function(event){
105        var length = this.autoObj.children.length;
106        //光标键"↓"
107        if(event.keyCode==40){
108            ++this.index;
109            if(this.index>length){
110                this.index=0;
111            }else if(this.index==length){
112                this.obj.value=this.search_value;
113            }
114            this.changeClassname(length);
115        }
116        //光标键"↑"
117        else if(event.keyCode==38){
118            this.index--;
119            if(this.index<-1){
120                this.index=length - 1;
121            }else if(this.index==-1){
122                this.obj.value=this.search_value;
123            }
124            this.changeClassname(length);
125        }
126        //回车键
127        else if(event.keyCode==13){
128            this.autoObj.className="auto_hidden";
129            this.index=-1;
130        }else{
131            this.index=-1;
132        }
133    },
134    //程序入口
135    start: function(event){
136        if(event.keyCode!=13&&event.keyCode!=38&&event.keyCode!=40){
137            this.init();
138            this.deleteDIV();
139            this.search_value=this.obj.value;
140            var valueArr=this.value_arr;
141            valueArr.sort();
142            if(this.obj.value.replace(/(^\s*)|(\s*$)/g,'')==""){ return; }//值为空，退出
143            try{ var reg = new RegExp("(" + this.obj.value + ")","i");}
144            catch (e){ return; }
145            var div_index=0;//记录创建的DIV的索引
146            for(var i=0;i<valueArr.length;i++){
147                if(reg.test(valueArr[i])){
148                    var div = document.createElement("div");
149                    div.className="auto_onmouseout";
150                    div.seq=valueArr[i];
151                    div.onclick=this.setValue(this);
152                    div.onmouseover=this.autoOnmouseover(this,div_index);
153                    div.innerHTML=valueArr[i].replace(reg,"<strong>$1</strong>");//搜索到的字符粗体显示
154                    this.autoObj.appendChild(div);
155                    this.autoObj.className="auto_show";
156                    div_index++;
157                }
158            }
159        }
160        this.pressKey(event);
161        window.onresize=Bind(this,function(){this.init();});
162    }
163}
164//-->
165</SCRIPT>
166<body>
167<h1 align="center">自动完成函数(Autocomplete Function)</h1>
168    <div align="center"><input type="text" style="width:300px;height:20px;font-size:14pt;" id="o" onkeyup="autoComplete.start(event)"></div>
169    <div class="auto_hidden" id="auto"><!--自动完成 DIV--></div>
170<script>
171    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']);
172</SCRIPT>
173</body>
174</html>
365据说看到好文章不转的人，服务器容易宕机！
标签：
原创文章如转载，请注明：转载自郑州网建-前端开发　http://camnpr.com/
本文链接：http://camnpr.com/javascript/1478.html

相关文章

    关注本站

    [+] 关注微博 留言板 WAP访问本站 订阅本站

    一条新消息

    根椐世界厕所组织统计，每人每天上厕所6-8次，一年约2500次，算下来人的一生约有3年时间在厕所里度过。女性如厕时间平均70秒-75秒，男性如厕时间平均30秒-35秒。 [?]
      冬天来了，该换包包了，猛烈点击！！！
       平还是不平？
      流浪猫咪的女包店

    小编推荐

      东东找到花花了
    • 最新评论
    • 最近访客

      热门文章

      想你所想 爱你所爱

      豫ICP备10013645号 Copyright 2009-2022 camnpr.com  
      关于我们 - 广告合作 - 免责声明 - 投诉建议