1

我有一个通过 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>

查询

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 调用与键盘导航同时包含在页面中时，箭头导航停止工作（尽管列表仍然显示并按预期填充）

任何提示表示赞赏！

4

1 回答 1

0

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

当您按向上或向下箭头时，它会调用 ajax 来刷新列表，并且可能“.selected”类正在被删除。

因此，请改用 change 事件：

$('#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() 方法。

于 2013-03-15T11:15:58.587 回答