Question

我有一个下拉列表，我正在努力制作像谷歌建议的东西。我看了jQuery Autocomplete，但我想看看我是否可以制作我们的当前的解决方案工作（由不同的开发人员完成）。我们正在填写自动填充结果下拉列表，如下所示：

<ul id="autocomplete-results">
  <li class="auto-li category">TAGS</li>
  <li class="auto-li">red wine</li>
  <li class="auto-li">french wine</li>
  <li class="auto-li category">LOCATIONS</li>
  <li class="auto-li">Joe's Restaurant</li>
  <li class="auto-li">Noodle Express</li>
</ul>

这很好。如果存在keydown事件，则运行checkKey。我想要的逻辑是它进入第一个没有类别类的auto-li类。但使用这种语法导航无法正常工作。这只是一个语法问题，因为删除category会导致一切正常。

我怎样才能将它从'红葡萄酒'跳到乔斯餐厅？

document.onkeydown = checkKey;
....
function checkKey(e){
if(e.keyCode==40){
  if($('.auto-li-hover').length > 0){
    var $that=$('.auto-li-hover');
    $that.next('.auto-li:not(.category)').addClass('auto-li-hover')
    $that.removeClass('auto-li-hover');
  }else{
    //alert('NO auto-li-hover');
    // ###
    $('.auto-li:first:not(.category)').addClass('auto-li-hover'); // this doesn't add this class correctly
  }
}

Answer 1

我会在not和first中切换顺序，因为li可能会先获得.auto-li，然后li不会.category 1}}，在这种情况下，不会留下li。

所以，试试这个：

function checkKey(e){
if(e.keyCode==40){
  if($('.auto-li-hover').length > 0){
    var selectables = $('#autocomplete-results li:not(.category)');
    var current = $('.auto-li-hover');
    var i = selectables.index(current);

    if(i==selectables.length - 1)
        i = 0;
    current.removeClass('auto-li-hover');
    selectables.eq(++i).addCLass('auto-li-hover');
  }else{
    //alert('NO auto-li-hover');
    // ###
    $('.auto-li:not(.category):first').addClass('auto-li-hover'); // this doesn't add this class correctly
  }
}

Answer 2

document.onkeydown = checkKey;
//....
function checkKey(e){
    if(e.keyCode==40){
        if($('.auto-li-hover').length > 0){
            var $that=$('.auto-li-hover');
            $that.removeClass('auto-li-hover');   
            var continueNext = true;

            while(continueNext ){
                $next = $that.next('.auto-li');
                if($next.length > 0 && $next.hasClass('category')){  
                    $that = $next ;
                }else if($next.length > 0){
                    continueNext= false;
                }
            }
        }else{
            //alert('NO auto-li-hover');
            // ###
            $('.auto-li:first:not(.category)').addClass('auto-li-hover'); // this doesn't add this class correctly
        }
    }

我认为这会对你有所帮助。我不测试它。

如何在没有使用next / previous的选择器的选择器之间导航

2 个答案: