用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焦点图切换简易插件制作过程全纪录
Aug 27 Javascript
js实现的动画导航菜单效果代码
Sep 10 Javascript
js严格模式总结(分享)
Aug 22 Javascript
jQuery实现的多张图无缝滚动效果【测试可用】
Sep 12 Javascript
实现一个简单的vue无限加载指令方法
Jan 10 Javascript
javascript获取以及设置光标位置
Feb 16 Javascript
js下载文件并修改文件名
May 08 Javascript
seajs下require书写约定实例分析
May 16 Javascript
React Native基础入门之调试React Native应用的一小步
Jul 02 Javascript
vue debug 二种方法
Sep 16 Javascript
Vuex的基本概念、项目搭建以及入坑点
Nov 04 Javascript
js/jQuery实现全选效果
Jun 17 jQuery
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
解决控件遮挡问题:关于有窗口元素和无窗口元素
2007/01/28 PHP
详解WordPress开发中过滤属性以及Sql语句的函数使用
2015/12/25 PHP
Yii2 队列 shmilyzxt/yii2-queue 简单概述
2017/08/02 PHP
ThinkPHP 3使用OSS的方法
2018/07/19 PHP
WordPress免插件实现面包屑导航的示例代码
2020/08/20 PHP
利用try-catch判断变量是已声明未声明还是未赋值
2014/03/12 Javascript
Javascript 浮点运算精度问题分析与解决
2014/03/26 Javascript
JavaScript不使用prototype和new实现继承机制
2014/12/29 Javascript
jQuery定义背景动态切换效果的方法
2015/03/23 Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
2016/05/05 Javascript
JS获取子窗口中返回的数据实现方法
2016/05/28 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
2019/04/24 Javascript
JS自定义滚动条效果
2020/03/13 Javascript
让你30分钟快速掌握vue3教程
2020/10/26 Javascript
[01:10:48]完美世界DOTA2联赛PWL S2 GXR vs PXG 第一场 11.18
2020/11/18 DOTA
python在windows命令行下输出彩色文字的方法
2015/03/19 Python
Python中的Classes和Metaclasses详解
2015/04/02 Python
用PyQt进行Python图形界面的程序的开发的入门指引
2015/04/14 Python
Python根据欧拉角求旋转矩阵的实例
2019/01/28 Python
python之生产者消费者模型实现详解
2019/07/27 Python
使用python绘制温度变化雷达图
2019/10/18 Python
Python完全识别验证码自动登录实例详解
2019/11/24 Python
基于plt.title无法显示中文的快速解决
2020/05/16 Python
使用Keras 实现查看model weights .h5 文件的内容
2020/06/09 Python
Biblibili视频投稿接口分析并以Python实现自动投稿功能
2021/02/05 Python
利用纯css3实现的文字亮光特效的代码演示
2014/11/27 HTML / CSS
database面试题
2013/03/28 面试题
大学生村官心得体会范文
2014/01/04 职场文书
工会主席岗位责任制
2014/02/11 职场文书
工程专业应届生求职信
2014/02/19 职场文书
服务承诺书怎么写
2014/05/24 职场文书
企业年度评优方案
2014/06/02 职场文书
煤矿开采专业求职信
2014/07/08 职场文书
政法干警核心价值观心得体会
2014/09/11 职场文书
2015暑假假期总结
2015/07/13 职场文书
【超详细】八大排序算法的各项比较以及各自特点
2021/03/31 Python