1

テキストボックスでキーが押されるたびにAPIを呼び出す、ajax呼び出しを介して入力されたオートコンプリートリストがあります。

これは正常に機能し、リストに目的の結果が表示されます。問題は、上下の矢印キーを使用してキーボードナビゲーションを追加し、リストアイテムをスクロールして、現在のアイテムのクラスを「選択済み」に変更したいということです。

リストをスクロールするコードはそれ自体で機能しますが、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>

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呼び出しがキーボードナビゲーションと同時にページに含まれている場合、矢印ナビゲーションは動作を停止します（リストは引き続き表示され、期待どおりに表示されます）

ヒントをいただければ幸いです。

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() メソッドの使用を避けるために、2 番目の解決策を試してください。

于 2013-03-15T11:15:58.587 に答える