首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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>

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
解决 FireFox 下[使用event很麻烦] 的问题.
Aug 22 Javascript
js文字滚动停顿效果代码
Jun 28 Javascript
jquery 如何动态添加、删除class样式方法介绍
Nov 07 Javascript
artDialog双击会关闭对话框的修改过程分享
Aug 05 Javascript
JS 页面计时器示例代码
Oct 28 Javascript
escape编码与unescape解码汉字出现乱码的解决方法
Jul 02 Javascript
深入理解JavaScript系列（49）：Function模式（上篇）
Mar 04 Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
Mar 09 Javascript
VUE 更好的 ajax 上传处理 axios.js实现代码
May 10 Javascript
JavaScript数组push方法使用注意事项
Oct 30 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
Feb 03 Javascript
Vue如何使用混合Mixins和插件开发详解
Feb 05 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
共享文件夹(1) 骨架屏(1) DeOldify(1) 横向滚动(1) virtualenv(1) Postman(1) 加载异常(1) BottomSheetDialog(1) scrapy(1) localStorage(1)
You might like
咖啡是不是喝了会上瘾？咖啡是必须品吗！
2021/03/04 新手入门
PHP的栏目导航程序
2006/10/09 PHP
PHP安全配置详细说明
2011/09/26 PHP
smarty表格换行实例
2014/12/15 PHP
PHP实用函数分享之去除多余的0
2015/02/06 PHP
JavaScript splice()方法详解
2020/09/22 Javascript
js 动态加载事件的几种方法总结
2013/12/25 Javascript
使用node.js半年来总结的 10 条经验
2014/08/18 Javascript
jQuery源码分析之jQuery中的循环技巧详解
2014/09/06 Javascript
JavaScript实现数字数组按照倒序排列的方法
2015/04/06 Javascript
Javascript非构造函数的继承
2015/04/27 Javascript
javascript学习笔记整理（概述、变量、数据类型简介）
2015/10/25 Javascript
js识别uc浏览器的代码
2015/11/06 Javascript
Windows 系统下设置Nodejs NPM全局路径
2016/04/26 NodeJs
微信小程序链接传参并跳转新页面
2016/11/29 Javascript
vuejs使用$emit和$on进行组件之间的传值的示例
2017/10/04 Javascript
vue短信验证性能优化如何写入localstorage中
2018/04/25 Javascript
微信小程序如何加载数据库真实数据的实现
2020/03/04 Javascript
在react-antd中弹出层form内容传递给父组件的操作
2020/10/24 Javascript
解决removeEventListener 无法清除监听的问题
2020/10/30 Javascript
pyqt4教程之messagebox使用示例分享
2014/03/07 Python
Python的Flask站点中集成xhEditor文本编辑器的教程
2016/06/13 Python
SVM基本概念及Python实现代码
2017/12/27 Python
Python实现html转换为pdf报告(生成pdf报告)功能示例
2019/05/04 Python
numpy中的meshgrid函数的使用
2019/07/31 Python
Python学习笔记之错误和异常及访问错误消息详解
2019/08/08 Python
python wxpython 实现界面跳转功能
2019/12/17 Python
python多进程下的生产者和消费者模型
2020/05/07 Python
详解pandas获取Dataframe元素值的几种方法
2020/06/14 Python
大专自我鉴定范文
2013/10/23 职场文书
物流专业大学生求职信范文
2013/10/28 职场文书
家长对老师的感言
2014/03/11 职场文书
《天游峰的扫路人》教学反思
2014/04/25 职场文书
奥巴马就职演讲稿
2014/05/15 职场文书
初中化学教学反思
2016/02/22 职场文书
2016优秀护士先进个人事迹材料
2016/02/25 职场文书