Question

我需要有人帮助我找到正确的方向（我主要完成后端工作，最近我的JS经验主要涉及jQuery，而不是JS中的太多低级编程，所以我缺少JS关于如何正确实施它的模式。）

https://jsfiddle.net/honesta/4jef9k29/6/

        // Keydown
        $(this).on('keydown', function(event) {
            switch(event.keyCode) {
                case 27: // escape
                    this.hide();
                    break;
                // case 40: // keydown
                    //
                default:
                    this.request();
                    break;
            }
        });

我有这个自定义自动完成功能，尝试让键盘KEYUP和KEYDOWN工作以导航列表。知道我从哪里开始？什么是最好的方法？或者一些类似的例子，我可以根据我的实现。

Answer 1

由于下拉项目的引导:hover状态，它会有点复杂。

$(this).on('keydown', function(event){
   switch(event.keyCode) {
      case 27: // escape
        this.hide();
        break;
      case 40: //Keydown
        event.preventDefault();
        var active_li = $('.li_active').removeClass('li_active').next();
        if(!active_li.length) active_li = $('ul.dropdown-menu li:eq(0)');
        active_li.addClass('li_active').find('a').trigger('mouseenter');
        break;
      case 38: //Keyup 
        event.preventDefault();
        var active_li = $('.li_active').removeClass('li_active').prev();
        if(!active_li.length) active_li = $('ul.dropdown-menu li:last-child');
        active_li.addClass('li_active').find('a').trigger('mouseenter');
        break;
      case 13:
        var value = $('ul.dropdown-menu .li_active').removeClass('li_active').attr('data-value');
        if (value && this.items[value]) {
          this.select(this.items[value]);
          this.hide();
        }
        break;
      default:
        this.request();
        break;
   }
});

为了不干扰bootstrap :hover状态，您需要覆盖CSS并添加事件处理程序：

$(this).siblings('ul.dropdown-menu')
.on('click', 'a', $.proxy(this.click, this))
.on('mouseenter', 'a', function(){
    $('.li_active').removeClass('li_active');
    $(this).parent().addClass('li_active');
})
.on('mouseleave', 'a', function(){
    $('.li_active').removeClass('li_active');
});

CSS：

ul.dropdown-menu li a:hover{
  background : #ffffff;
}

ul.dropdown-menu .li_active, ul.dropdown-menu .li_active a:hover {
  background : #f5f5f5;
}

JSFiddle demo

我有一个自定义自动完成，并希望使KEYUP和KEYDOWN工作

1 个答案: