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>
时间: 2024-10-08 07:14:10

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

JS代码预解析原理、函数相关、面向对象

JS重要知识点 这里列出了一些JS重要知识点(不全面,但自己感觉很重要).彻底理解并掌握这些知识点,对于每个想要深入学习JS的朋友应该都是必须的. 讲解还是以示例代码搭配注释的形式,这里做个小目录: JS代码预解析原理(包括三个段落): 函数相关(包括 函数传参,带参数函数的调用方式,闭包): 面向对象(包括 对象创建.原型链,数据类型的检测,继承). JS代码预解析原理 /****************** JS代码预解析原理 ******************//*JS代码预解析.变量作

JS代码预解析原理

/* JS代码预解析.变量作用域.作用域链等 应该能作为学习JS语言的入门必备知识.下边给出些简要解释和一些典型的代码段,若要了解更多,能从网上搜索到更多相关示例. 引用网上的一段有关 "JS的执行顺序" 的解释:如果一个文档流中包含多个script代码段(用script标签分隔的js代码或引入的js文件),它们的运行顺序是:步骤1. 读入第一个代码段(js执行引擎并非一行一行地执行程序,而是一段一段地分析执行的)步骤2. 做语法分析,有错则报语法错误(比如括号不匹配等),并跳转到步骤

JS的预编译和执行顺序 详析

原文:JS的预编译和执行顺序 详析 最近在复习javascript的事件处理时发现了一个问题,然后也是我来写javascript的预编译和执行顺序的问题   代码:   复制代码 代码一 <html>   <head>     <title>事件处理</title>     <meta http-equiv="content-type" content="text/html;charset=utf-8"/>

pg_resetxlog - 重置一个 PostgreSQL 数据库集群的预写日志以及其它控制内容

SYNOPSIS pg_resetxlog [ -f ] [ -n ] [ -o oid] [ -x xid] [ -l fileid,seg] datadir DESCRIPTION 描述 pg_resetxlog 清理预写日志(WAL)并且可以选择地重置其它一些控制信息(存储在 pg_control 文件中). 有时候,如果这些文件崩溃了,我们需要这个功能. 我们一定只把它用作最后的方法,就是说只有因为这样的崩溃导致服务器无法启动的时候才使用. 在运行这个命令之后,我们可能可以启动服务器了,

SQLite 预写式日志

SQLite在3.7.0版本引入了WAL (Write-Ahead-Logging),WAL的全称是Write Ahead Logging,它是很多数据库中用于实现原子事务的一种机制,引入WAL机制之前,SQLite使用rollback journal机制实现原子事务.       rollback journal机制的原理是:在修改数据库文件中的数据之前,先将修改所在分页中的数据备份在另外一个地方,然后才将修改写入到数据库文件中:如果事务失败,则将备份数据拷贝回来,撤销修改:如果事务成功,则删

预写式日志WAL

Chapter 25. 预写式日志(Write-Ahead Logging (WAL)) Table of Contents 25.1. WAL 的好处 25.2. WAL 配置 25.3. 内部 预写式日志 (WAL) 是一种实现事务日志的标准方法.有关它的详细描述可以在大多数(如果不是全部的话)有关事务处理的书中找到. 简而言之,WAL 的中心思想是对数据文件的修改(它们是表和索引的载体)必须是只能发生在这些修改已经记录了日志之后, 也就是说,在描述这些变化的日志记录冲刷到永久存储器之后.

Chapter 11.预写式日志(Write-Ahead Logging (WAL)

11.1. 一般性描述 预写式日志 (WAL) 是一种实现事务日志的标准方法.有关它的详细描述可以在 大多数(如果不是全部的话)有关事务处理的书中找到. 简而言之,WAL 的中心思想是对数据文件 的修改(它们是表和索引的载体)必须是只能发生在这些修改已经 记录了日志之后 -- 也就是说,在日志记录冲刷到永久存储器之后. 如果我们遵循这个过程,那么我们就不需要在每次事务提交的时候 都把数据页冲刷到磁盘,因为我们知道在出现崩溃的情况下, 我们可以用日志来恢复数据库:任何尚未附加到数据页的记录 都将先

HTML JS文字闪烁实现(项目top.htm分析)

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 <!-- saved from url=(0033)https://192.168.1.2/topframe6.htm --> 3 <HTML><HEAD><TITLE>topframe</TITLE> 4 <META http-equiv=Content-Type conte

JS基于时间戳写的浏览访问人数

Title:JS基于时间戳写的浏览访问人数  --2013-12-23 14:07 <script language="JavaScript"> var timestamp,timetmp,rand; rand = Math.floor(Math.random()*10); //随机数 timestamp = new Date().getTime().toString(); //时间戳 timetmp = (parseInt(timestamp)/1000/60).toSt