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. 内部 预 ...
随机推荐
- SVN目录对号图标（更新、冲突）不显示
长谈想知道,大约SVN这些冲突.变化.加入.不显示问题etc目录下的复选图标,退房的在线信息,多数说的更改icon的settings,后来,一点点仔细阅读SVN配有英文说明文档,我相信,改变是有点问题 ...
- win2008服务器部署系统前需要做的一些工作
一.打开.net framework及IIS管理器 win2008系统自带是有.net framework3.5的,但是默认该功能是没有开启的,需要手动开启(和win7一样).点击控制面板->程 ...
- Oracle cloud control 12c 的启动与关闭
Oracle cloud control 12c整个安装比較复杂,光是安装路径的选择,登录password,端口号等众多个配置不免让人眼花缭乱,目不暇接.本文描写叙述的是安装完成后怎样获取安装时设定的 ...
- Log4NET 数据库
阅读目录 Log4NET简介 前提 详细步骤 回到顶部 Log4NET简介 log4net库是Apache log4j框架在Microsoft .NET平台的实现,是一个帮助程序员将日志信息输出到各种 ...
- java处理Excel文件---excel文件的创建，删除，写入，读取
这篇文章的代码是我封装的excel处理类,包含推断excel是否存在,表格索引是否存在,创建excel文件,删除excel文件,往excel中写入信息,从excel中读取数据. 尤其在写入与读取两个方 ...
- 怎样在多线程中使用JNI？
假设你想了解JNI在怎样在多线程下使用 假设你在子线程使用JNI时遇到findClass不能找到目标Class,而在主线程下却能找到该Class的问题.或是GetEnv返回NULL的问题 假设你想多学 ...
- Java日志性能那些事(转)
在任何系统中,日志都是非常重要的组成部分,它是反映系统运行情况的重要依据,也是排查问题时的必要线索.绝大多数人都认可日志的重要性,但是又有多少人仔细想过该怎么打日志,日志对性能的影响究竟有多大呢?今天 ...
- SharePoint 如何使自己的网页自动跳转
SharePoint 如何使自己的网页自动跳转 SharePoint自动制作自己的网页跳的很easy,只有在页面上要添加一个Web部分--内容编辑器,对应的js代码就可以. ...
- rabbitMQ说明文档
rabbitMQ是什么 RabbitMQ 是由 LShift 提供的一个 Advanced Message Queuing Protocol (AMQP) 的开 ...
- Sql Server之旅——第五站 确实不得不说的DBCC命令
原文:Sql Server之旅--第五站 确实不得不说的DBCC命令 今天研发中心办年会,晚上就是各自部门聚餐了,我个人喜欢喝干红,在干红中你可以体味到那种酸甜苦辣...人生何尝不是这样呢???正好 ...