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);
  });
      

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/361.html