js 公式编辑器 - 自定义匹配规则 - 带提示下拉框(7)
调用获取坐标方法
// 调用获取坐标方法 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';
}
js代码 -- 设置默认参数
var defaults = {
triggerCharacter : '$', // 默认触发事件 字符
levelCharacter: '.', // 默认多层检索触发字符
dropdownWidth:'150px' // 下拉框默认宽度
};
js代码 -- 插件调用
此处只为展示效果 在 keyPressAction 中能自定义匹配规则进行拓展
$("#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);
}
});
由于代码比较多,这里就不展示所有代码了,最终效果图:

在此附上demo下载链接:
不管你信不信,我已经设置了下载口令,亲们必须在心里说出我的一个优点才能点击下载~
下载demo
总结
以上所述是小编给大家介绍的js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对黑区网络网站的支持!
