js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标

var _this = $(this);
var e = event || window.event; // 键值兼容
var searchstart = false; // 设置检索事件开关
var checkcharacter = false; // 输入字符检索开关  
var oldcurrentpos = ''; // 检索值开始的位置
var currentpos = ''; // 检索值结束的位置
var selectval = ''; // 检索值
var pos = ''; // 设置光标位置
var entercharacter = ''; // 当前输入的字符
var dotval; // 输入 . 时从0到当前光标位置文本
var dotdollerpos; // 获取往后查找离 . 最近的 $ 的下标，引文输入 . 时的检索值即dotselectval不包含 $ 本身，所以需要加1 
var dotselectval; // 输入 . 时的检索值

 // 插入下拉框
 _this.dropdown = $('<ul class="edittips" style="display:none;"></ul>');
// 获取到的弹出的下拉框的位置是绝对定位的坐标，所以得把弹出的层放到$("body").after(_this.dropdown);   
 _this.dropdown.css({
 'width':opts.dropdownwidth,
 'position':'absolute',
 });
 _this.css({
 'position': 'relative',
 });

 // 获取当前光标位置 currentpos
  var getstart =function() {  
   var all_range = '';
   if (navigator.useragent.indexof("msie") > -1) { //ie
   if( _this.get(0).tagname == "textarea" ){ 
    // 根据body创建textrange
    all_range = document.body.createtextrange();
    // 让textrange范围包含元素里所有内容
    all_range.movetoelementtext(_this.get(0));
   } else {
    // 根据当前输入元素类型创建textrange
    all_range = _this.get(0).createtextrange();
   }
   // 输入元素获取焦点
   _this.focus();
   // 获取当前的textrange,如果当前的textrange是一个具体位置而不是范围,textrange的范围从currentpos到end.此时currentpos等于end
   var cur_range = document.selection.createrange();
   // 将当前的textrange的end向前移"选中的文本.length"个单位.保证currentpos=end
   cur_range.moveend('character',-cur_range.text.length)
   // 将当前textrange的currentpos移动到之前创建的textrange的currentpos处, 此时当前textrange范围变为整个内容的currentpos处到当前范围end处
   cur_range.setendpoint("starttostart",all_range);

   // 此时当前textrange的start到end的长度,就是光标的位置
   currentpos = cur_range.text.length;
   } else {
   // 文本框获取焦点
   _this.focus();
   // 获取当前元素光标位置
   currentpos = _this.get(0).selectionstart;
   //console.log("光标当前位置:"+currentpos);
   }
   // 返回光标位置
   return currentpos;
  };  

 // 获取检索值开始位置 oldcurrentpos
  var getoldcurrentpos = function(){
   getstart(); // 开始输入的时候的光标位置 currentpos
   oldcurrentpos = currentpos; // 储存输入开始位置
   console.log(oldcurrentpos);
  }

 // 设置光标位置
  var setcareposition = function(start,end) {
   if(navigator.useragent.indexof("msie") > -1){
   var all_range = '';
   if( _this.get(0).tagname == "textarea" ){ 
    // 根据body创建textrange
    all_range = document.body.createtextrange();
    // 让textrange范围包含元素里所有内容
    all_range.movetoelementtext(_this.get(0));
   } else {
    // 根据当前输入元素类型创建textrange
    all_range = _this.get(0).createtextrange();
   }
   _this.focus();
   // 将textrange的start设置为想要的start
   all_range.movestart('character',start);
   // 将textrange的end设置为想要的end. 此时我们需要的textrange长度=end-start; 所以用总长度-(end-start)就是新end所在位置
   all_range.moveend('character',-(all_range.text.length-(end-start)));
   // 选中从start到end间的文本,若start=end,则光标定位到start处
   all_range.select();
   }else{
   // 文本框获取焦点
   _this.focus();
   // 选中从start到end间的文本,若start=end,则光标定位到start处
   _this.get(0).setselectionrange(start,end);
   }
  };

// 结束检索事件
  var endsearch = function(){
   _this.dropdown.find("li").remove(); // 移除下拉框中的选项
   _this.dropdown.hide(); // 隐藏下拉框
   searchstart = false; // 初始化检索开关 searchstart
   entercharacter=''; // 初始化当前字符
  }

 // 获取检索的值 selctval
  var getselectval = function(){
   var val = _this.val();
   if( searchstart == true && entercharacter != opts.levelcharacter ){ // 当输入的是字符 triggercharacter 的时候 默认为 $
   selectval = val.substring(oldcurrentpos,currentpos); // 检索值直接为获取的文本区域
   }
   if( searchstart == true && entercharacter == opts.levelcharacter ){ // 当输入的是字符 levelcharacter 的时候 默认为 .
   dotval = val.slice(0,currentpos);
   dotdollerpos = dotval.lastindexof(opts.triggercharacter)+1;
   dotselectval = dotval.substring(dotdollerpos,currentpos);
   selectval = dotselectval;
   console.log("到当前下标的字符串为："+dotval);
   console.log("到当前下标最近的$下标是："+dotdollerpos);
   console.log("输入 . 时检索值为："+dotselectval);
   }  
   console.log("获取的值区域为："+oldcurrentpos+"-"+currentpos);
   if( oldcurrentpos > currentpos ){ // 回删时清除选项li 隐藏下拉框
   endsearch()
   }  
  }

 // 选中li当前项 改变输入框value值 定位光标
  var changevalue = function(){
   var val = _this.val(); 
   var litxt = _this.dropdown.find(".active").text();
   var litxtlength = litxt.length;
   var vallength = val.length;
   // 此处需要区分触发检索事件的符号是
   if( entercharacter == opts.levelcharacter ){ // 如果是 .
   var beforeselectval = val.substring(0,dotdollerpos);  
   }
   else{ // 如果是 &
   var beforeselectval = val.substring(0,oldcurrentpos);
   }
   var beforeselectvallength = beforeselectval.length;
   var afterselectval = val.substring(currentpos,vallength);
   var pos = litxtlength + beforeselectvallength;
   val = beforeselectval+litxt+afterselectval;
   _this.val(val);
   setcareposition(pos,pos); // 将光标定位在插入值后面
   endsearch();
   console.log("文本长度:"+beforeselectval.length);
   console.log("li文本为:"+litxt);
   console.log("前部为:"+beforeselectval);
   console.log("后部分为:"+afterselectval);
   return false; // 此处必须加上return false 不然会调用callbacktips 初始化 dropdown
  }

 // 定义回调函数 callbacktips
  var callbacktips = function(arr_json){
   // 初始化 ul 
   _this.dropdown.find("li").remove();
   if( arr_json ){
   for( i=0;i<arr_json.length;i++ ){
    var n = arr_json[i].indexof(selectval);
    if( n != -1 ){
    _this.dropdown.append('<li>'+arr_json[i]+'</li>'); 
    }else{
    return;
    }     
   };
   }   
   _this.dropdown.show();
   _this.dropdown.find("li:first-child").addclass("active");
   // 自定义样式
   _this.dropdown.find("li").css({ 
   'width':'100%',
   });
  };

　　// 获得焦点的时候获取光标位置
  _this.click(function(){
   getoldcurrentpos()
  });

　//下拉框显示时 阻止键盘方向键默认事件
  _this.keydown(function(e){
   var dropdownisshow = _this.dropdown.css("display");
   if( dropdownisshow == "block" ){
   if( e.keycode == 38 || e.keycode == 40 || e.keycode == 13 ){
    e.preventdefault();
   }
   }
  })

// 监听输入框value值变化
  _this.keyup(function(e){
   var val = _this.val(); 
   // 当前项索引
   var n = _this.dropdown.find(".active").index();
   // li 个数
   var n_max = _this.dropdown.find("li").length;  
   getstart(); // 获得最新光标位置
   // 方向键控制 li 选项
   if( e.keycode == 38 ){   
   if(n-1>=0){
    _this.dropdown.find('li').eq(n-1).addclass("active").siblings().removeclass("active");
   }
   if( n == 0){
    _this.dropdown.find('li').eq(n_max-1).addclass("active").siblings().removeclass("active");
   }
   return false; // 此处必须加上return false 不然会重复初始化
   }  
   if( e.keycode == 40 ){
   if(n<n_max-1){
    _this.dropdown.find('li').eq(n+1).addclass("active").siblings().removeclass("active"); 
   }
   if( n+1 == n_max ){
    _this.dropdown.find('li').eq(0).addclass("active").siblings().removeclass("active");
   }
   return false; // 此处必须加上return false 不然会重复初始化
   } 
   if( e.keycode != 37 && e.keycode != 38 && e.keycode != 39 && e.keycode != 40 ){
   var reg = new regexp("[`~!@#^&*()=|{}':;',\\[\\]<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]");
   entercharacter = val.substring(currentpos-1,currentpos); // 当前输入的字符
   //console.log(entercharacter);
   if( reg.test(entercharacter) == false && entercharacter != " "){ // 输入的字符合法 可以执行检索事件
    //console.log("输入字符合法");
    checkcharacter = true;
   }else{
    checkcharacter = false;
    endsearch()
    console.log("输入了不合法字符");
    //console.log(selectval);   
   }   
   }   
   console.log("当前输入的字符是:"+entercharacter);
   if( entercharacter == opts.triggercharacter || entercharacter == opts.levelcharacter){
   console.log("输入了$或者.");
   // 输入了 $,打开开关，允许检索事件执行
   searchstart = true;
   getoldcurrentpos(); // 输入 $ 的时候重置 oldcurrentpos
   }
   getselectval(); // 外度调用获取检索值方法 保证实时更新 selectval 及 searchstart
   if( searchstart == true && checkcharacter == true && e.keycode != 13 ){
   console.log("获取的值:"+selectval);
   if( $.isfunction(opts.keypressaction) ){   
    opts.keypressaction(selectval, function(arr_json){
    // 调用回调函数
    callbacktips(arr_json);   
    });
   }
   }
   if( e.keycode == 13 ){ // 按enter键选取当前li文本值 重组输入框 value值
   var dropdownisshow = _this.dropdown.css("display");
   if( dropdownisshow == "block" ){ // 为了在下拉框隐藏时按 enter键 能换行，需要加上这个判断
    changevalue();
    console.log("这是点击enter后searchstart："+searchstart);
   }
   }
   console.log("这是整个事件执行完成以后："+searchstart);
  });

　// 切换当前项
  _this.dropdown.on('mouseenter','li',function(){
   $(this).addclass("active").siblings().removeclass("active");
  });

 // 点击当前项获取文本值 重组输入框 value值 失去焦点时隐藏下拉框 清空下拉框
  $(document).click(function(e){
   var e = event || window.event;
   var el = e.target.localname; // 获取事件源 标签名
   el == "li" ? changevalue() : endsearch();
   //console.log(el);
  })

/*********以下为获取下拉框像素坐标方法*********/ 
  var kingwolfofsky = { 
   getinputpositon: function (elem) { 
   if (document.selection) { //ie support 
    elem.focus(); 
    var sel = document.selection.createrange(); 
    return { 
    left: sel.boundingleft, 
    top: sel.boundingtop, 
    bottom: sel.boundingtop + sel.boundingheight 
    }; 
   } else { 
    var that = this; 
    var clonediv = '{$clone_div}', cloneleft = '{$cloneleft}', clonefocus = '{$clonefocus}', cloneright = '{$cloneright}'; 
    var none = '<span style="white-space:pre-wrap;"> </span>'; 
    var div = elem[clonediv] || document.createelement('div'), focus = elem[clonefocus] || document.createelement('span'); 
    var text = elem[cloneleft] || document.createelement('span'); 
    var offset = that._offset(elem), index = this._getfocus(elem), focusoffset = { left: 0, top: 0 }; 
   
    if (!elem[clonediv]) { 
    elem[clonediv] = div, elem[clonefocus] = focus; 
    elem[cloneleft] = text; 
    div.appendchild(text); 
    div.appendchild(focus); 
    document.body.appendchild(div); 
    focus.innerhtml = '|'; 
    focus.style.csstext = 'display:inline-block;width:0px;overflow:hidden;z-index:-100;word-wrap:break-word;word-break:break-all;'; 
    div.classname = this._clonestyle(elem); 
    div.style.csstext = 'visibility:hidden;display:inline-block;position:absolute;z-index:-100;word-wrap:break-word;word-break:break-all;overflow:hidden;'; 
    }; 
    div.style.left = this._offset(elem).left + "px"; 
    div.style.top = this._offset(elem).top + "px"; 
    var strtmp = elem.value.substring(0, index).replace(/</g, '<').replace(/>/g, '>').replace(/\n/g, '<br/>').replace(/\s/g, none); 
    text.innerhtml = strtmp; 
   
    focus.style.display = 'inline-block'; 
    try { focusoffset = this._offset(focus); } catch (e) { }; 
    focus.style.display = 'none'; 
    return { 
    left: focusoffset.left, 
    top: focusoffset.top, 
    bottom: focusoffset.bottom 
    }; 
   } 
   },
   // 克隆元素样式并返回类 
   _clonestyle: function (elem, cache) { 
   if (!cache && elem['${clonename}']) return elem['${clonename}']; 
   var classname, name, rstyle = /^(number|string)$/; 
   var rname = /^(content|outline|outlinewidth)$/; //opera: content; ie8:outline && outlinewidth 
   var csstext = [], sstyle = elem.style; 
   
   for (name in sstyle) { 
    if (!rname.test(name)) { 
    val = this._getstyle(elem, name); 
    if (val !== '' && rstyle.test(typeof val)) { // firefox 4 
     name = name.replace(/([a-z])/g, "-$1").tolowercase(); 
     csstext.push(name); 
     csstext.push(':'); 
     csstext.push(val); 
     csstext.push(';'); 
    }; 
    }; 
   }; 
   csstext = csstext.join(''); 
   elem['${clonename}'] = classname = 'clone' + (new date).gettime(); 
   this._addheadstyle('.' + classname + '{' + csstext + '}'); 
   return classname; 
   }, 
   
   // 向页头插入样式 
   _addheadstyle: function (content) { 
   var style = this._style[document]; 
   if (!style) { 
    style = this._style[document] = document.createelement('style'); 
    document.getelementsbytagname('head')[0].appendchild(style); 
   }; 
   style.stylesheet && (style.stylesheet.csstext += content) || style.appendchild(document.createtextnode(content)); 
   }, 
   _style: {}, 
   
   // 获取最终样式 
   _getstyle: 'getcomputedstyle' in window ? function (elem, name) { 
   return getcomputedstyle(elem, null)[name]; 
   } : function (elem, name) { 
   return elem.currentstyle[name]; 
   }, 
   // 获取光标在文本框的位置 
   _getfocus: function (elem) { 
   var index = 0; 
   if (document.selection) {// ie support 
    elem.focus(); 
    var sel = document.selection.createrange(); 
    if (elem.nodename === 'textarea') {//textarea 
    var sel2 = sel.duplicate(); 
    sel2.movetoelementtext(elem); 
    var index = -1; 
    while (sel2.inrange(sel)) { 
     sel2.movestart('character'); 
     index++; 
    }; 
    } 
    else if (elem.nodename === 'input') {// input 
    sel.movestart('character', -elem.value.length); 
    index = sel.text.length; 
    } 
   } 
   else if (elem.selectionstart || elem.selectionstart == '0') { // firefox support 
    index = elem.selectionstart; 
   } 
   return (index); 
   }, 
   
   // 获取元素在页面中位置 
   _offset: function (elem) { 
   var box = elem.getboundingclientrect(), doc = elem.ownerdocument, body = doc.body, docelem = doc.documentelement; 
   var clienttop = docelem.clienttop || body.clienttop || 0, clientleft = docelem.clientleft || body.clientleft || 0; 
   var top = box.top + (self.pageyoffset || docelem.scrolltop) - clienttop, left = box.left + (self.pagexoffset || docelem.scrollleft) - clientleft; 
   return { 
    left: left, 
    top: top, 
    right: left + box.width, 
    bottom: top + box.height 
   }; 
   } 
  };

　 // 调用获取坐标方法 show(elem)
  $(this).keyup(function(){
   show(this);
  });  
  // 调用 kingwolfofsky， 获取光标坐标
  function show(elem) { 
   var p = kingwolfofsky.getinputpositon(elem); 
   var s = _this.dropdown.get(0); 
   var ttop = parseint(_this.css("margintop"));
   var tleft = parseint(_this.css("marginleft"));
   s.style.top = p.bottom-ttop+10+'px'; 
   s.style.left = p.left-tleft + 'px';   
  }

var defaults = { 
 triggercharacter : '$', // 默认触发事件 字符
 levelcharacter: '.', // 默认多层检索触发字符
 dropdownwidth:'150px' // 下拉框默认宽度
 };

　$("#test").edittips({
  triggercharacter : '$',
  levelcharacter: '.',
  dropdownwidth:'150px', 
  keypressaction:function(selectval,callbacktips){
  var arr_json;
  if( selectval == "" ){
   arr_json = ["a","ab","b","bb"]
  }
  if(selectval && selectval.indexof("a")== 0){
   arr_json = ["a","ab"];
  }
  if(selectval && selectval.indexof("b")== 0){
   arr_json = ["b","bb"];
  }
  if(selectval && selectval.indexof("a.")== 0){
   arr_json = ["a.a","a.b","a.c"];
  }
  if(selectval && selectval.indexof("b.")== 0){
   arr_json = ["b.a","b.b","b.c"];
  }
  if(selectval && selectval.indexof("ab.")== 0){
   arr_json = ["ab.a","ab.b","ab.c"];
  }
  if(selectval && selectval.indexof("bb.")== 0){
   arr_json = ["bb.a","bb.b","bb.c"];
  }
  callbacktips(arr_json);
  }  
 });