js 文字预写匹配

效果图：

demo如下：

<!DOCTYPE html>

<html>

    <head>

    <title>文字预写</title>

    </head>

    <style type="text/css">

        .autolistCss li{cursor: pointer;font-size:12px;line-height: 20px;}

        .autolistCss li:hover{background: #ccc;}

        .autolistCss li .highLight{color:#f00;}

        .autolistCss .overli{background: #ccc;}

    </style>

    <body>

        <div id="zl_old_email" class="inp04" contenteditable="true" style="margin-top:20px;height:30px;background:#fff;border:1px solid #111;">

        </div>

    </body>

</html>

<script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>

<script type="text/javascript">

var advanceTips = {

    advanceArr:[],

    liArr:[],

    box:null,

    input:null,

    flagOP:false,

    init:function(arr,id){

        var obj = document.getElementById(id);

        this.advanceArr = arr;

        var pos = advanceTips.getElementPos(obj);//获取聊天框位置

        advanceTips.createDivZ(pos);

        $('body').click(function(e){

            var e = e || window.event;

            var target = e.target || e.srcElement;

            if(target.nodeName == "SPAN" && $(target).parent().parent().hasClass('autolistCss') || target.nodeName == "LI" && $(target).parent().hasClass('autolistCss')){

                var text = '';

                if(target.nodeName == 'LI'){

                    text = $(target).text();

                }

                if(target.nodeName == 'SPAN'){

                    text = $(target).parent().text();

                }

                $(obj).text(text);

                $('#autoComplentid').hide();

            }

        });

        this.addEvent($(document)[0],"keydown",function(e){

            var index = $(".overli").index();

            var lengths = $('#autoComplentid ul').find("li").length -1;

            if(e.keyCode == 38){//上键

                $('#focusBlur').focus();

                if(index == -1){

                    $('#autoComplentid ul').find("li").eq(0).addClass("overli").siblings("li").removeClass("overli");

                    index=0;

                    $('#autoComplentid').animate({scrollTop:0},100);

                }else{

                    if(index == 0){

                        $('#autoComplentid ul').find("li").eq(lengths).addClass("overli").siblings("li").removeClass("overli");

                        index = lengths;

                        $('#autoComplentid').animate({scrollTop:999},100);

                     }else{

                        $('#autoComplentid ul').find("li").eq(index-1).addClass("overli").siblings("li").removeClass("overli");

                        index--;

                        var scrollTop = $('#autoComplentid').scrollTop();

                        $('#autoComplentid').animate({scrollTop:scrollTop-20},100);

                        if(index == lengths){

                            index=0;

                        }

                    }

                }

            }else if(e.keyCode == 40){//下键

                $('#focusBlur').focus();

                if(index == -1){

                     $('#autoComplentid ul').find("li").eq(0).addClass("overli").siblings("li").removeClass("overli");

                       index = 0;

                       $('#autoComplentid').animate({scrollTop:0},100);

                 }else{

                     if(index >= lengths){

                           $('#autoComplentid ul').find("li").eq(0).addClass("overli").siblings("li").removeClass("overli");

                           index = 0;

                           $('#autoComplentid').animate({scrollTop:0},100);

                    }else{

                        $('#autoComplentid ul').find("li").eq(index+1).addClass("overli").siblings("li").removeClass("overli");

                        index++;

                        var scrollTop = $('#autoComplentid').scrollTop();

                        $('#autoComplentid').animate({scrollTop:scrollTop+20},100);

                    }

                }

            }else if(e.keyCode == 13){

                    if(index != -1){

                        $(obj).text($('#autoComplentid ul').find('li').eq(index).text());

                    }

                     $('#autoComplentid').hide();

                     $('#autoComplentid ul').html('');

                     index = -1;

                      if(e && e.stopPropagation){

                       //W3C取消冒泡事件

                        e.stopPropagation();

                        e.preventDefault();

                     }else{

                       //IE取消冒泡事件

                        window.event.cancelBubble = true;

                        window.event.returnValue = false; //取消默认行为

                   }

            }

        });

    },

    addEvent:function(obj,type,fn){//添加事件

        if(obj.addEventListener){

            obj.addEventListener(type,fn,false);

            return false;

        }else if(obj.attachEvent){

            obj.attachEvent("on"+type,fn);

        }

    },

    getElementPos:function (obj){//获取位置

         var ua = navigator.userAgent.toLowerCase();

         var isOpera = (ua.indexOf('opera') != -1);

         var isIE = (ua.indexOf('msie') != -1 && !isOpera); // not opera spoof

         var el = obj;

         if(el.parentNode === null || el.style.display == 'none') {

                 return false;

             }

         var parent = null;

         var pos = [];

         var box;

         if(el.getBoundingClientRect){//IE

            box = el.getBoundingClientRect();

            var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);

            var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);

            return {x:box.left + scrollLeft, y:box.top + scrollTop};

         }else if(document.getBoxObjectFor){

            box = document.getBoxObjectFor(el);

            var borderLeft = (el.style.borderLeftWidth)?parseInt(el.style.borderLeftWidth):0;

            var borderTop = (el.style.borderTopWidth)?parseInt(el.style.borderTopWidth):0;

            pos = [box.x - borderLeft, box.y - borderTop];

         } else{// safari & opera

            pos = [el.offsetLeft, el.offsetTop];

            parent = el.offsetParent;

          if (parent != el) {

            while (parent) {

                pos[0] += parent.offsetLeft;

                pos[1] += parent.offsetTop;

                parent = parent.offsetParent;

            }

          }

          if (ua.indexOf('opera') != -1 || ( ua.indexOf('safari') != -1 && el.style.position == 'absolute' )) {

           pos[0] -= document.body.offsetLeft;

           pos[1] -= document.body.offsetTop;

          }

         }

         if (el.parentNode) {

            parent = el.parentNode;

           } else {

            parent = null;

           }

         while (parent && parent.tagName != 'BODY' && parent.tagName != 'HTML') {

              pos[0] -= parent.scrollLeft;

              pos[1] -= parent.scrollTop;

          if (parent.parentNode) {

                   parent = parent.parentNode;

              } else {

                   parent = null;

            }

        }

        return {x:pos[0], y:pos[1]};

    },

    createDivZ:function(pos){//创建显示div

        var html = '';

        var posStr = 'position:absolute;top:'+ (pos.y+40) +'px;left:'+ pos.x +'px;'

        html+='<div id="autoComplentid" style="background:#eee;width:280px;height:100px;display:none;overflow-y:auto;'+ posStr +'">';

        html+='    <ul class="autolistCss" style="padding:2px;">';

        html+='    </ul>';

        html+= '<input type="text" id="focusBlur" style="width:1px;height:0px;background:none;border:none;font-size:0;line-height:0;"></text>';

        html+='</div>';

        $('body').append(html);

    },

    changeEvent:function(obj,text){//创建事件绑定

        if(text.length > 10){return;}

        var checkarr = this.advanceArr;

        var filterarr = [];

        var temp = '';

        for(var i=0;i<checkarr.length;i++){

            if(text != ''){

                if(checkarr[i].indexOf(text) != -1){

                    $('#autoComplentid').show();

                    var str = checkarr[i];

                    var strPattern = text;

                    var pattern = new RegExp(strPattern,'i');

                    var replaceStr = str.replace(pattern,'<span class="highLight">'+ text +'</span>');

                    filterarr.push(replaceStr);

                }else{

                    //$('#autoComplentid').hide();

                }

            }else{

                $('#autoComplentid').hide();

            }

        }

        for(var j=0;j<filterarr.length;j++){

            temp+='<li>'+ filterarr[j] +'</li>';

        }

        $('.autolistCss').html(temp);

    }

}

</script>

<script>

    var arr = ['请问有什么可以帮助你的！','你好有什么可以帮助你的!','你现在在嘎啊！','您的邮件到哪儿了？','你是谁?','你还有事吗？','请问有什么可以帮助你的！','你好有什么可以帮助你的!','你现在在嘎啊！','您的邮件到哪儿了？','你是谁?','你还有事吗？'];

    advanceTips.init(arr,'zl_old_email');

    $('#zl_old_email').keyup(function(){

        var oldtext = $(this).attr('oldVlaue');

        var text = $.trim($(this).text());

        if(oldtext == text){

            return;

        }else{

            $(this).attr('oldVlaue',text);

            advanceTips.changeEvent($(this)[0],text);

        }

    });

</script>

js 文字预写匹配的更多相关文章

JS的预编译和执行顺序详析
原文:JS的预编译和执行顺序详析最近在复习javascript的事件处理时发现了一个问题,然后也是我来写javascript的预编译和执行顺序的问题代码: 复制代码代码一 <ht ...
js的预解析
在ES6之前,变量使用var声明,会存在变量的预解析(函数也有预解析).ES6引了let和const,但是现阶段ES6并没有完全普及,而且很多比较老的代码都还是按照ES5的标准甚至是ES3的标准来书写 ...
原生Js汉语拼音首字母匹配城市名/自动提示列表
根据城市的汉语名称首字母把城市排序,基本思路: 1.处理数据,按照需要的格式分别添加{HOT:{hot:[],ABCDEFG:{a:[1,2,3],b:[1,2,3]},HIGHLMN:{},OPQR ...
两个实例轻松理解js函数预解析
js函数预解析例子1: 先上一段代码,看看能不能写出最终的执行结果. console.log(a); var a = 1; console.log(a); function a(){ console ...
pg_resetxlog - 重置一个 PostgreSQL 数据库集群的预写日志以及其它控制内容
SYNOPSIS pg_resetxlog [ -f ] [ -n ] [ -o oid] [ -x xid] [ -l fileid,seg] datadir DESCRIPTION 描述 pg_r ...
SQLite 预写式日志
SQLite在3.7.0版本引入了WAL (Write-Ahead-Logging),WAL的全称是Write Ahead Logging,它是很多数据库中用于实现原子事务的一种机制,引入WAL机制之 ...
js图片预加载
图片预加载有大体有几种方式 1.html标签或css加载图片. 显而易见我们使用img标签或者通过标签的background-image属性都可以实现图片的预加载.但是为了避免初次载入过多图片影响体验 ...
js的预编译机制
1.var定义的是“当前作用域下的一个变量”,当在函数内部不使用var声明时,会被当做全局变量而不是函数内的局部变量(严格模式下还会报错) 2.js的预编辑:[对定义式函数]直接创建为作用域上的函数变 ...
预写式日志WAL
Chapter 25. 预写式日志(Write-Ahead Logging (WAL)) Table of Contents 25.1. WAL 的好处 25.2. WAL 配置 25.3. 内部预 ...

随机推荐

Scala 专题指南
Scala 专题教程-Case Class和模式匹配 Scala 专题教程-Case Class和模式匹配(1):简单的演示样例 Scala 专题教程-Case Class和模式匹配(2): 模式的种 ...
IQ调制、整形滤波器与星座映射
http://www.cnblogs.com/touchblue/archive/2013/01/15/2861952.html 现代通信中.IQ调制基本上属于是标准配置,由于利用IQ调制能够做出全部 ...
C代码分析器（一个公开赛冠军）
最近心血来潮,我希望能写一个通用的代码分析工具(其实这个词有点太.事实上为C代码).看到这几天我看到代码头晕眼花,尽管Source Insight救命,仍然没有足够的智慧思考很多地方. 如今主要遇到的 ...
由Java代码运行shell命令/脚本
JDK有两种方法自带通Runtime.getRuntime().exec()和ProcessBuilder课上做, 后者是JDK1.5引进后,,政府还提出要放弃使用Runtime顺便做.现的时候就是採 ...
CPU 风扇清理灰尘加油全过程图解
主机电源风扇因为使用时间长,风扇轴承的润滑油耗尽,导致风扇转速下降或是不转,引起电源热量无法有效排除而造成电脑常常死机,解决的方法有几种. 现图讲解明最简单省钱的办法例如以下: 1.把电源从主机上拆下 ...
EnumMap demo
优点:常量做为Key,在编译期就确定了.Enum做为key,在运行时也可以改变 package enumdemo; import java.util.EnumMap; import java.util ...
nodejs使用connect-mongodb报错（Please ensure that you set the default write concern）
原本是使用connect-mongo的,可能是express版本号的升级报错了.改用connect-mongodb.可是使用后出现了例如以下的警告: G:\nodejs\moviesite>gr ...
苹果公司的新的编程语言 Swift 高级语言（）两－－基本数据类型
一 . 常量和变量 Swift语言对常量和变量的声明进行了明白的区分 Swift语言的常量类型比C 语言的constants类型更加强大,语义更加明白. 常量和变量的差别是常量在设置或初始化后 ...
Helloworld with c
CentOS 7 之Helloworld with c 其实我也不知道是为了啥, 到了现在这种年纪还想学习Linux下的C语言编程.因为我一直就傻傻地认为机会是垂青有准备的人,也一直呆呆地认为活到 ...
Jquery动态插入table行
想在一个<table id="table1"></table>标签中动态的插入行,在jquery中可以这样做: $("#table1") ...

js 文字预写匹配

js 文字预写匹配的更多相关文章

随机推荐

热门专题