jquery - at.js 插件问题

Question

我正在使用 at.js 插件，它工作得很好，期待当我在显示下拉菜单时使用向上/向下箭头键的那一刻。此时，它聚焦第二个列表，并且下拉列表被隐藏。

我知道问题是我使用 JQuery 来浏览列表，但是有什么方法可以防止这种情况发生吗？

提前致谢!

var li = $('li.test');
      var liSelected;
        $(document).keydown(function(e) {
        if (e.which === 40) {
          e.preventDefault();
          if (liSelected) {
            liSelected.removeClass('selected');
            next = liSelected.next();
            if (next.length > 0) {
              liSelected = next.addClass('selected');
            } else {
              liSelected = li.eq(0).addClass('selected');
            }
          } else {
            liSelected = li.eq(0).addClass('selected');
          }
        } else if (e.which === 38) {
          e.preventDefault();
          if (liSelected) {
            liSelected.removeClass('selected');
            next = liSelected.prev();
            if (next.length > 0) {
              liSelected = next.addClass('selected');
            } else {
              // liSelected = li.last().addClass('selected');
            }
          } else {
            // liSelected = li.last().addClass('selected');
          }
        }
        $('li.selected .single-line').focus();
      });
  $('.single-line').atwho({
    at: "@",
    data:['Person1', 'Person2', 'Person3', 'Person4']
  })

.atwho-view {
    position:absolute;
    top: 0;
    left: 0;
    display: none;
    margin-top: 18px;
    background: white;
    color: black;
    border: 1px solid #DDD;
    border-radius: 3px;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
    min-width: 120px;
    z-index: 11110 !important;
}

.atwho-view .atwho-header {
    padding: 5px;
    margin: 5px;
    cursor: pointer;
    border-bottom: solid 1px #eaeff1;
    color: #6f8092;
    font-size: 11px;
    font-weight: bold;
}

.atwho-view .atwho-header .small {
    color: #6f8092;
    float: right;
    padding-top: 2px;
    margin-right: -5px;
    font-size: 12px;
    font-weight: normal;
}

.atwho-view .atwho-header:hover {
    cursor: default;
}

.atwho-view .cur {
    background: #3366FF;
    color: white;
}
.atwho-view .cur small {
    color: white;
}
.atwho-view strong {
    color: #3366FF;
}
.atwho-view .cur strong {
    color: white;
    font:bold;
}
.atwho-view ul {
    /* width: 100px; */
    list-style:none;
    padding:0;
    margin:auto;
    max-height: 200px;
    overflow-y: auto;
}
.atwho-view ul li {
    display: block;
    padding: 5px 10px;
    border-bottom: 1px solid #DDD;
    cursor: pointer;
    /* border-top: 1px solid #C8C8C8; */
}
.atwho-view small {
    font-size: smaller;
    color: #777;
    font-weight: normal;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Caret.js/0.3.1/jquery.caret.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/at.js/1.5.0/js/jquery.atwho.min.js"></script>


<div id = 'main'>
<ul>
   <li class="test"><div id = 'n1' contenteditable=true class="single-line">Pres @ character</div></li>
   <li class="test"> <div id = 'n2' contenteditable=true class="single-line">Test</div></li>
   <li class="test"> <div id = 'n3' contenteditable=true class="single-line"> Content 3</div></li>
   <li class="test"> <div id = 'n4' contenteditable=true class="single-line"> Content 4</div></li>
</ul>
    
   

   
</div>

Answer 1

这可能有助于理解您的代码的作用......
也许你认为它在做其他事情。
请参阅代码中的注释。

var li = $('li.test');
var liSelected;
$(document).keydown(function(e) {
    if (e.which === 40) {
        e.preventDefault();
        if (liSelected) {                                   // Undefined on first keydown, Always equals li.eq[0] rest of the time.
            liSelected.removeClass('selected');
            next = liSelected.next();
            if (next.length > 0) {                          // Will NEVER be more than zero since .next selects one element.
            liSelected = next.addClass('selected');
            } else {
                liSelected = li.eq(0).addClass('selected'); // So you define it to your first li here too.
            }
        } else {
        liSelected = li.eq(0).addClass('selected');         // liSelected is defined here on first keydown only.
        }                                                   // li.eq[0] is you first li, the one with id = 'n1'
    } else if (e.which === 38) {
        e.preventDefault();
        if (liSelected) {                                   // Exact same comments as above for this part.
            liSelected.removeClass('selected');
            next = liSelected.prev();
            if (next.length > 0) {
                liSelected = next.addClass('selected');
            } else {
            // liSelected = li.last().addClass('selected');
            }
        } else {
        // liSelected = li.last().addClass('selected');
        }
    }
    $('li.selected .single-line').focus();
});

就像我在评论中所说，箭头已经可以与 at.js 一起使用。 .
由于 liSelected 未定义，if 条件结果为 false。
继续阅读 .eq() here

第二次编辑
-------------------

这是有效的。

$(".single-line").on("focus", function () {
    $(".single-line").removeClass("selected"); // Clear all other "selected" class
    $(this).addClass("selected"); // Add "selected" class on focus... And on the editable div instead of on a li
});

var triggers = ["@", ":"];

$(".single-line").keydown(function (e) {

    console.log(e.which); // usefull console.log
    var current = $(this);
    var opened = current.find(".atwho-query");

    var flag = !!$.inArray(opened.html(), triggers);

    if (!flag) {
        console.log("query openned");
    } else {
        console.log("query closed");
        if (e.which === 40) { // Arrow down
            console.log("arrow down");
            current.parent().next().children(".single-line").focus(); // Set focus on next li.

        }
        if (e.which === 38) { // Arrow up
            console.log("arrow up");
            current.parent().prev().children(".single-line").focus(); // Set previous on next li.
        }
    }

});

// This was your code
$('.single-line').atwho({
    at : "@",
    data : ['Person1', 'Person2', 'Person3', 'Person4']
})

example on jsfiddle