Question

我有一个通过ajax调用填充的自动完成列表，每次在文本框中按下键时都会调用API。

这很好用，列表会显示所需的结果。问题是，我想用向上/向下箭头键添加键盘导航并滚动列表项，将类更改为当前项的“选中”。

滚动列表的代码可以自行运行，但停止与ajax调用一起使用。我假设必须发生某种冲突，每次进行ajax调用时都会重置某些内容，阻止列表项的索引值被正确识别？这段代码是否正确？

HTML：

<form method="post" action="" autocomplete="off">
    <input type="text" id="textBox" autocomplete="off" />
       <ul id="predictiveList">
          <li><a href="test">test</a></li>
          <li><a href="test">test2</a></li>
          <li><a href="test">test3</a></li>
        </ul>              
 </form>

THE JQUERY

var $listItems = $('#predictiveList li');

$('#textBox').live('keyup', function(e)
{
    var key = e.keyCode,
    $selected = $listItems.filter('.selected'),
    $current;

    $listItems.removeClass('selected');

    if ( key == 40 ) // Down key
    {
        if ( ! $selected.length || $selected.is(':last-child') ) {
            $current = $listItems.eq(0);
        }
        else {
            $current = $selected.next();
        }
    }
    else if ( key == 38 ) // Up key
    {
        if ( ! $selected.length || $selected.is(':first-child') ) {
            $current = $listItems.last();
        }
        else {
            $current = $selected.prev();
        }
    }

     $current.addClass('selected') ;
});


$('#textBox').live('keyup', function(e) {
    $.ajax({
        type: 'GET',
        dataType:'jsonp',
        url: 'http://www.apiCallurlhere.js?callback=displayOptions'
    });
});


/******** Generates dropdown from results of AJAX call ***********/

function displayOptions(data){ 

    $('#predictiveList').show();  
    var obj = data.results;
    var dropdownOptions = '';

    //generate list of options for dropdown menu
    $.each( obj, function( i, v ) {
        dropdownOptions += '<li><a href="' + v.pubId + '">' + v.place + '</a></li>';

    });
    $('#predictiveList').html(dropdownOptions); 

}

正如我所说，两者都可以独立工作，但当AJAX调用与键盘导航同时包含在页面中时，箭头导航停止工作（尽管列表仍然显示并按预期填充）

任何提示赞赏！

Answer 1

啊，不要使用keyup事件来获取自动完成列表。

按向上或向下箭头时，它会调用ajax刷新列表，可能会删除“.selected”类。

相反，请使用更改事件：

$('#textBox').live('change', function(e) {
    $.ajax({
        type: 'GET',
        dataType:'jsonp',
        url: 'http://www.apiCallurlhere.js?callback=displayOptions'
    });
});

但是，.live（）方法在1.7中已弃用，在1.9中已被删除。所以你真的应该使用.on（）方法：

$(document).on('change', '#textBox', function(e) {
    $.ajax({
        type: 'GET',
        dataType:'jsonp',
        url: 'http://www.apiCallurlhere.js?callback=displayOptions'
    });
});

首先使用.live（）方法尝试我的第一个解决方案。如果它有效，那么尝试我的第二个解决方案以避免使用弃用的.live（）方法。

jQuery键盘箭头导航无法在自动完成下拉列表中工作

1 个答案: