用js实现输入提示(自动完成)的实例代码


Posted in Javascript onJune 14, 2013
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>autoComplete</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.autoComplete {margin:8px;position:relative;float:left;}
.autoComplete input {width:200px;height:25px;margin:0;padding:0;line-height:25px;}
.autoComplete ul {z-index:-12;padding:0px;margin:0px;border:1px #333 solid;width:200px;background:white;display:none;position:absolute;left:0;top:28px;*margin-left:9px;*margin-top:2px;margin-top:1px;}
.autoComplete li {list-style:none;}
.autoComplete li a {display:block;color:#000;text-decoration:none;padding:1px 0 1px 5px;_width:97%;}
.autoComplete li a:hover {color:#000;background:#ccc;border:none;}
</style>
<script type="text/javascript">
//<![CDATA[
var getElementsByClassName = function (searchClass, node, tag) {/* 兼容各浏览器的选择class的方法;(:https://3water.com,想了解更多请看这个地址) */
    node = node || document, tag = tag ? tag.toUpperCase() : "*";
    if(document.getElementsByClassName){/* 支持getElementsByClassName的浏览器 */
        var temp = node.getElementsByClassName(searchClass);
        if(tag=="*"){
            return temp;
        } else {
            var ret = new Array();
            for(var i=0; i<temp.length; i++)
                if(temp[i].nodeName==tag)
                    ret.push(temp[i]);
            return ret;
        }
    }else{/* 不支持getElementsByClassName的浏览器 */
        var classes = searchClass.split(" "),
            elements = (tag === "*" && node.all)? node.all : node.getElementsByTagName(tag),
            patterns = [], returnElements = [], current, match;
        var i = classes.length;
        while(--i >= 0)
            patterns.push(new RegExp("(^|s)" + classes[i] + "(s|$)"));
        var j = elements.length;
        while(--j >= 0){
            current = elements[j], match = false;
            for(var k=0, kl=patterns.length; k<kl; k++){
                match = patterns[k].test(current.className);
                if(!match) break;
            }
            if(match) returnElements.push(current);
        }
        return returnElements;
    }
};
var addEvent=(function(){/* 用此函数添加事件防止事件覆盖 */
    if(document.addEventListener){
        return function(type, fn){ this.addEventListener(type, fn, false); };
    }else if(document.attachEvent){
        return function(type,fn){
            this.attachEvent(on+type, function () {
                return fn.call(this, window.event);/* 兼容IE */
            });
        };
    }
})();
;(function(window){
/* 插件开始 */
var autoComplete=function(o){
    var handler=(function(){
        var handler=function(e,o){ return new handler.prototype.init(e,o); };/* 为每个选择的dom都创建一个相对应的对象,这样选择多个dom时可以很方便地使用 */
        handler.prototype={
            e:null, o:null, timer:null, show:0, input:null, popup:null,
            init:function(e,o){/* 设置初始对象 */
                this.e=e, this.o=o,
                this.input=this.e.getElementsByTagName(this.o.input)[0],
                this.popup=this.e.getElementsByTagName(this.o.popup)[0],
                this.initEvent();/* 初始化各种事件 */
            },
            match:function(quickExpr,value,source){/* 生成提示 */
                var li = null;
                for(var i in source){
                    if( value.length>0 && quickExpr.exec(source[i])!=null ){
                        li = document.createElement(li);
                        li.innerHTML = <a href="javascript:;">+source[i]+</a>;
                        this.popup.appendChild(li);
                    }
                }
                if(this.popup.getElementsByTagName(a).length)
                    this.popup.style.display=block;
                else
                    this.popup.style.display=none;
            },
         &n
Javascript 相关文章推荐
jQuery.event兼容各浏览器的event详细解析
Dec 18 Javascript
node.js中的url.parse方法使用说明
Dec 10 Javascript
js判断输入字符串是否为空、空格、null的方法总结
Jun 14 Javascript
总结Javascript中数组各种去重的方法
Oct 04 Javascript
setTimeout函数的神奇使用
Feb 26 Javascript
EasyUI的TreeGrid的过滤功能的解决思路
Aug 08 Javascript
weui框架实现上传、预览和删除图片功能代码
Aug 24 Javascript
详解Vue用自定义指令完成一个下拉菜单(select组件)
Oct 31 Javascript
使用Angular CLI生成路由的方法
Mar 24 Javascript
vue组件中的数据传递方法
May 14 Javascript
vue实现的树形结构加多选框示例
Feb 02 Javascript
Vue表单提交点击事件只允许点击一次的实例
Oct 23 Javascript
jsp+javascript打造级连菜单的实例代码
Jun 14 #Javascript
JavaScript实现网页上的浮动广告的简单方法
Jun 14 #Javascript
setTimeout函数兼容各主流浏览器运行执行效果实例
Jun 13 #Javascript
JQuery 操作/获取table具体代码
Jun 13 #Javascript
js获取dom的高度和宽度(可见区域及部分等等)
Jun 13 #Javascript
如何使Chrome控制台支持多行js模式——意外发现
Jun 13 #Javascript
jQuery插件的写法分享
Jun 12 #Javascript
You might like
PHP跳转页面的几种实现方法详解
2013/06/08 PHP
PHP包含文件函数include、include_once、require、require_once区别总结
2014/04/05 PHP
记录Yii2框架开发微信公众号遇到的问题及解决方法
2018/07/20 PHP
PHP配置ZendOpcache插件加速
2019/02/14 PHP
jquery连缀语法如何实现
2012/11/29 Javascript
js使用心得分享
2015/01/13 Javascript
Jquery使用val方法读写value值
2015/05/18 Javascript
javascript实现自动输出文本(打字特效)
2015/08/27 Javascript
easyui messager alert 三秒后自动关闭提示的实例
2016/11/07 Javascript
BootStrap注意事项小结(五)表单
2017/03/10 Javascript
JS实现批量上传文件并显示进度功能
2017/06/27 Javascript
JavaScript数据结构之双向链表和双向循环链表的实现
2017/11/28 Javascript
Vue写一个简单的倒计时按钮功能
2018/04/20 Javascript
Vue源码探究之状态初始化
2018/11/14 Javascript
实现高性能javascript的注意事项
2019/05/27 Javascript
Layui点击图片弹框预览的实现方法
2019/09/16 Javascript
小程序实现背景音乐播放和暂停
2020/06/19 Javascript
详解Vue中的自定义指令
2020/12/07 Vue.js
[04:03]DOTA2肉山黑名单梦之声 风暴之灵中文配音鉴赏
2013/07/03 DOTA
[49:08]Secret vs VP 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[01:04]不如跳舞!DOTA2新英雄玛尔斯的欢乐日常
2019/03/11 DOTA
跟老齐学Python之编写类之二方法
2014/10/11 Python
python模块之re正则表达式详解
2017/02/03 Python
python数据结构之链表的实例讲解
2017/07/25 Python
详解Python中的四种队列
2018/05/21 Python
Python中list查询及所需时间计算操作示例
2018/06/21 Python
Python基于sklearn库的分类算法简单应用示例
2018/07/09 Python
python 循环读取txt文档 并转换成csv的方法
2018/10/26 Python
Python Matplotlib简易教程(小白教程)
2020/07/28 Python
Python爬虫之Selenium警告框(弹窗)处理
2020/12/04 Python
Oakley官网:运动太阳镜、雪镜和服装
2016/09/30 全球购物
收银出纳员岗位职责
2014/02/23 职场文书
2014党员干部四风问题对照检查材料思想汇报
2014/09/24 职场文书
个人作风建设自查报告
2014/10/22 职场文书
2016母亲节感恩话语
2015/12/09 职场文书
AudioContext 实现音频可视化(web技术分享)
2022/02/24 Javascript