js 公式编辑器 - 自定义匹配规则 - 带提示下拉框(5)
定义回调函数
获取检索值之后就需要发送请求了,我们拿到返回的数组 arr_json 后,将其遍历生成 li 添加到下拉框中
// 定义回调函数 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();
}
}
})
keyup 事件
通过keyuo事件:”我们能实时监听输入框;也能通过按键切换当前项以及改变光标位置;也能限制输入字符范围,比如这里:当输入某些字符时,将会被认为输入了不合法字符而终止检索事件;
我们的事件开关也是通过该事件能改变其状态的以及 enter 键选取当前项
// 监听输入框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);
});
内容版权声明:除非注明,否则皆为本站原创文章。
