at.jsプラグインの問題

Question

私はat.jsプラグインを使用していますが、すべてうまく動作します。ドロップダウンが表示されているときに矢印キーを上下に使用するとすぐに動作します。この瞬間、2番目のリストにフォーカスし、ドロップダウンは非表示になります。

問題が私が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

これは、あなたが...
はたぶん、あなたはそれが何かをやっていたコードを取り払わないものをunderstantするのを助けることができます。
コードのコメントを参照してください。

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

第二EDIT
-------------------

上
読むには、作業ものです。

$(".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

Answer 2

使用At.js eventsこのような：

var isOpenAt = false; 
$('.single-line').atwho({ 
    at : "@", 
    data : ['Person1', 'Person2', 'Person3', 'Person4'] 
}).on("shown.atwho", function (event, flag, query) { 
    isOpenAt = true; 
}).on("hidden.atwho", function (event, flag, query) { 
    isOpenAt = false; 
}); 

これが最善の解決策が、この作業ではありません。

example on jsfiddle.net