用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 Select操作方法集合脚本之家特别版
May 17 Javascript
jquery中prop()方法和attr()方法的区别浅析
Sep 06 Javascript
解决Jquery load()加载GB2312页面时出现乱码的两种方案
Sep 10 Javascript
如何在JavaScript中实现私有属性的写类方式(二)
Dec 04 Javascript
JavaScript采用递归算法计算阶乘实例
Aug 04 Javascript
JavaScript判断数组重复内容的两种方法(推荐)
Jun 06 Javascript
AngularJS中table表格基本操作示例
Oct 10 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
Jul 03 Javascript
详解如何在微信小程序中愉快地使用sass
Jul 30 Javascript
JS Math对象与Math方法实例小结
Jul 05 Javascript
纯js实现无缝滚动功能代码实例
Feb 21 Javascript
js函数和this用法实例分析
Mar 13 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格式化工具Beautify PHP小小BUG
2008/04/24 PHP
php对二维数组按指定键值key排序示例代码
2013/11/26 PHP
PHP针对常规模板引擎中与CSS/JSON冲突的解决方法
2014/08/19 PHP
64位windows系统下安装Memcache缓存
2015/12/06 PHP
从性能方面考虑PHP下载远程文件的3种方法
2015/12/29 PHP
PHP创建对象的六种方式实例总结
2019/06/27 PHP
基础的prototype.js常用函数及其用法
2007/03/10 Javascript
在jquery中处理带有命名空间的XML数据
2011/06/13 Javascript
利用ajaxfileupload插件实现文件上传无刷新的具体方法
2013/06/08 Javascript
浅析js中取绝对值的2种方法
2013/07/09 Javascript
JavaScript中的getTimezoneOffset()方法使用详解
2015/06/10 Javascript
JS实现的自定义右键菜单实例二则
2015/09/01 Javascript
javascript基本语法
2016/05/31 Javascript
JS常见疑难点分析之match,charAt,charCodeAt,map,search用法分析
2016/12/25 Javascript
微信小程序 页面传值详解
2017/03/10 Javascript
浅谈angular.js跨域post解决方案
2017/08/30 Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
2017/11/15 Javascript
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
2018/02/10 Javascript
11个教程中不常被提及的JavaScript小技巧(推荐)
2019/04/17 Javascript
小程序实现录音上传功能
2019/11/22 Javascript
[43:58]DOTA2-DPC中国联赛定级赛 LBZS vs SAG BO3第一场 1月8日
2021/03/11 DOTA
python中使用PIL制作并验证图片验证码
2018/03/15 Python
在cmd中运行.py文件: python的操作步骤
2018/05/12 Python
浅析python中numpy包中的argsort函数的使用
2018/08/30 Python
Python数据抓取爬虫代理防封IP方法
2018/12/23 Python
Python中new方法的详解
2019/01/15 Python
Django 后台获取文件列表 InMemoryUploadedFile的例子
2019/08/07 Python
Numpy的简单用法小结
2019/08/28 Python
VScode连接远程服务器上的jupyter notebook的实现
2020/04/23 Python
使用pandas库对csv文件进行筛选保存
2020/05/25 Python
如何利用python正则表达式匹配版本信息
2020/12/09 Python
英国领先的独立酒精饮料零售商:DrinkSupermarket
2021/01/13 全球购物
幼儿园毕业教师感言
2014/02/21 职场文书
查摆问题自查报告范文
2014/10/13 职场文书
2015年安全保卫工作总结
2015/05/14 职场文书
Vue vee-validate插件的简单使用
2021/06/22 Vue.js