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语言中的Literal Syntax特性分析
Mar 08 Javascript
利用JS实现浏览器的title闪烁
Jul 08 Javascript
jquery的each方法使用示例分享
Mar 25 Javascript
创建js对象和js类的方法汇总
Dec 24 Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
Apr 08 Javascript
Jquery获取当前城市的天气信息
Aug 05 Javascript
AngularJS 模块化详解及实例代码
Sep 14 Javascript
js求数组中全部数字可拼接出的最大整数示例代码
Aug 25 Javascript
weebox弹出窗口不居中显示的解决方法
Nov 27 Javascript
vue 实现剪裁图片并上传服务器功能
Mar 01 Javascript
浅谈vue项目用到的mock数据接口的两种方式
Oct 09 Javascript
vue使用过滤器格式化日期
Jan 20 Vue.js
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
PHILIPS L4X25T电路分析和打理
2021/03/02 无线电
php判断字符串在另一个字符串位置的方法
2014/02/27 PHP
PDO预处理语句PDOStatement对象使用总结
2014/11/20 PHP
php上传图片客户端和服务器端实现方法
2015/03/30 PHP
Symfony2安装的方法(2种方法)
2016/02/04 PHP
thinkphp自带验证码全面解析
2016/09/18 PHP
Symfony2获取web目录绝对路径、相对路径、网址的方法
2016/11/14 PHP
用JavaScrpt实现文件夹简单轻松加密的实现方法图文
2008/09/08 Javascript
运用jquery实现table单双行不同显示并能单行选中
2009/07/25 Javascript
ASP.NET jQuery 实例16 通过控件CustomValidator验证RadioButtonList
2012/02/03 Javascript
JavaScript 中的日期和时间及表示标准介绍
2013/08/21 Javascript
Js 去掉字符串中的空格(实现代码)
2013/11/19 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
2016/08/19 Javascript
AngularJs ng-route路由详解及实例代码
2016/09/14 Javascript
node.js报错:Cannot find module 'ejs'的解决办法
2016/12/14 Javascript
javascript稀疏数组(sparse array)和密集数组用法分析
2016/12/28 Javascript
nodejs个人博客开发第六步 数据分页
2017/04/12 NodeJs
微信小程序 http请求的session管理
2017/06/07 Javascript
微信小程序常用赋值方法小结
2019/04/30 Javascript
微信小程序实现卡片左右滑动效果的示例代码
2019/05/01 Javascript
express如何解决ajax跨域访问session失效问题详解
2019/06/20 Javascript
Python基于PycURL实现POST的方法
2015/07/25 Python
Python设计模式编程中Adapter适配器模式的使用实例
2016/03/02 Python
Django管理员账号和密码忘记的完美解决方法
2018/12/06 Python
对python numpy.array插入一行或一列的方法详解
2019/01/29 Python
python代码 FTP备份交换机配置脚本实例解析
2019/08/01 Python
Python函数__new__及__init__作用及区别解析
2020/08/31 Python
锐步美国官方网站:Reebok美国
2018/01/10 全球购物
函授本科自我鉴定
2014/02/04 职场文书
大学自我评价
2014/02/12 职场文书
竞选演讲稿范文大全
2014/05/12 职场文书
2014年小学安全工作总结
2014/12/04 职场文书
2016大学迎新晚会开场白
2015/11/24 职场文书
python自动计算图像数据集的RGB均值
2021/06/18 Python
MySQL中一条update语句是如何执行的
2022/03/16 MySQL
SQL CASE 表达式的具体使用
2022/03/21 SQL Server