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


Posted in Javascript onApril 16, 2014

分享一篇无意间发现的自动完成源码。这里测试的时候使用的是数组,实际使用的时候,我们换成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">
<!--
var $ = function (id) {
    return "string" == typeof id ? document.getElementById(id) : id;
}
var Bind = function(object, fun) {
    return function() {
        return fun.apply(object, arguments);
    }
}
function AutoComplete(obj,autoObj,arr){
    this.obj=$(obj);        //输入框
    this.autoObj=$(autoObj);//DIV的根节点
    this.value_arr=arr;        //不要包含重复值
    this.index=-1;          //当前选中的DIV的索引
    this.search_value="";   //保存当前搜索的字符
}
AutoComplete.prototype={
    //初始化DIV的位置
    init: function(){
        this.autoObj.style.left = this.obj.offsetLeft + "px";
        this.autoObj.style.top  = this.obj.offsetTop + this.obj.offsetHeight + "px";
        this.autoObj.style.width= this.obj.offsetWidth - 2 + "px";//减去边框的长度2px  
    },
    //删除自动完成需要的所有DIV
    deleteDIV: function(){
        while(this.autoObj.hasChildNodes()){
            this.autoObj.removeChild(this.autoObj.firstChild);
        }
        this.autoObj.className="auto_hidden";
    },
    //设置值
    setValue: function(_this){
        return function(){
            _this.obj.value=this.seq;
            _this.autoObj.className="auto_hidden";
        }      
    },
    //模拟鼠标移动至DIV时,DIV高亮
    autoOnmouseover: function(_this,_div_index){
        return function(){
            _this.index=_div_index;
            var length = _this.autoObj.children.length;
            for(var j=0;j<length;j++){
                if(j!=_this.index ){      
                    _this.autoObj.childNodes[j].className='auto_onmouseout';
                }else{
                    _this.autoObj.childNodes[j].className='auto_onmouseover';
                }
            }
        }
    },
    //更改classname
    changeClassname: function(length){
        for(var i=0;i<length;i++){
            if(i!=this.index ){      
                this.autoObj.childNodes[i].className='auto_onmouseout';
            }else{
                this.autoObj.childNodes[i].className='auto_onmouseover';
                this.obj.value=this.autoObj.childNodes[i].seq;
            }
        }
    }
    ,
    //响应键盘
    pressKey: function(event){
        var length = this.autoObj.children.length;
        //光标键"↓"
        if(event.keyCode==40){
            ++this.index;
            if(this.index>length){
                this.index=0;
            }else if(this.index==length){
                this.obj.value=this.search_value;
            }
            this.changeClassname(length);
        }
        //光标键"↑"
        else if(event.keyCode==38){
            this.index--;
            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" style="width:300px;height:20px;font-size:14pt;" id="o" onkeyup="autoComplete.start(event)"></div>
    <div class="auto_hidden" id="auto"><!--自动完成 DIV--></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闭包 实例分析
Dec 25 Javascript
纯js实现div内图片自适应大小(已测试,兼容火狐)
Jun 16 Javascript
JQuery遍历json数组的3种方法
Nov 08 Javascript
JavaScript原型及原型链终极详解
Jan 04 Javascript
Atitit.js的键盘按键事件捆绑and事件调度
Apr 01 Javascript
jQuery实现select模糊查询(反射机制)
Jan 14 Javascript
Vue中的数据监听和数据交互案例解析
Jul 12 Javascript
阿里大于短信验证码node koa2的实现代码(最新)
Sep 07 Javascript
vue3.0 CLI - 2.5 - 了解组件的三维
Sep 14 Javascript
解决layui的table插件无法多层级获取json数据的问题
Sep 19 Javascript
Websocket 向指定用户发消息的方法
Jan 09 Javascript
JS实现移动端可折叠导航菜单(现代都市风)
Jul 07 Javascript
JavaScript中一个奇葩的IE浏览器判断方法
Apr 16 #Javascript
JavaScript面向对象编程入门教程
Apr 16 #Javascript
jQuery的cookie插件实现保存用户登陆信息
Apr 15 #Javascript
jquery实现点击文字可编辑并修改保存至数据库
Apr 15 #Javascript
jQuery制作的别致导航有阴影背景高亮模式窗口
Apr 15 #Javascript
JS比较2个日期间隔的示例代码
Apr 15 #Javascript
模拟一个类似百度google的模糊搜索下拉列表
Apr 15 #Javascript
You might like
总集篇&特番节目先行播出!《SAO Alicization War of Underworld》第2季度TV动画4月25日放送!
2020/03/06 日漫
example1.php
2006/10/09 PHP
php安全配置记录和常见错误梳理(总结)
2017/03/28 PHP
php array_chunk()函数用法与注意事项
2019/07/12 PHP
javascript 有趣而诡异的数组
2009/04/06 Javascript
javascript操作JSON的要领总结
2012/12/09 Javascript
jquery中的ajax方法怎样通过JSONP进行远程调用
2014/05/04 Javascript
CSS图片响应式 垂直水平居中
2015/08/14 Javascript
AngularJS ng-controller 指令简单实例
2016/08/01 Javascript
jQuery增加、删除及修改select option的方法
2016/08/19 Javascript
使用jquery.qrcode.js生成二维码插件
2016/10/17 Javascript
JS前端开发判断是否是手机端并跳转操作(小结)
2017/02/05 Javascript
深入理解vue $refs的基本用法
2017/07/13 Javascript
Vue2.0父子组件传递函数的教程详解
2017/10/16 Javascript
在create-react-app中使用css modules的示例代码
2018/07/31 Javascript
小程序组件之仿微信通讯录的实现代码
2018/09/12 Javascript
微信小程序 自定义复选框实现代码实例
2019/09/04 Javascript
详解如何在JS代码中消灭for循环
2019/12/11 Javascript
[01:46]DOTA2上海特锦赛小组赛英文解说KotlGuy采访
2016/02/27 DOTA
[01:14]DOTA2亚洲邀请赛小组赛赛前花絮
2017/03/27 DOTA
Python使用scrapy采集数据时为每个请求随机分配user-agent的方法
2015/04/08 Python
Python开发如何在ubuntu 15.10 上配置vim
2016/01/25 Python
深入分析python数据挖掘 Json结构分析
2018/04/21 Python
利用Python如何实现数据驱动的接口自动化测试
2018/05/11 Python
PyQt5如何将.ui文件转换为.py文件的实例代码
2020/05/26 Python
python中if及if-else如何使用
2020/06/02 Python
css3中的calc函数浅析
2018/07/10 HTML / CSS
利用CSS3把图片变成灰色模式的实例代码
2016/09/06 HTML / CSS
英国最大的汽车交易网站:Auto Trader UK
2016/09/23 全球购物
Melissa鞋马来西亚官方网站:MDreams马来西亚
2018/04/05 全球购物
大学生撤销处分思想汇报
2014/09/12 职场文书
公司文体活动总结
2015/05/07 职场文书
道歉的话语大全
2015/05/12 职场文书
2015年电话客服工作总结
2015/05/18 职场文书
Mysql实现简易版搜索引擎的示例代码
2021/08/30 MySQL
PC版《死亡搁浅导剪版》现已发售 展开全新的探险
2022/04/03 其他游戏