0

私はこれでGoogleの提案リストを模倣しようとしています:

function el(tid) {
    return document.getElementById(tid);
}

function addScript(u) {
    var head = document.getElementsByTagName('head')[0],
        sc2 = document.createElement('script');
    sc2.src = u;
    head.appendChild(sc2);
    setTimeout(function () {
        head.removeChild(sc2);
        sc2 = null;
    }, 600);
} //end addScript()

function suggest(data) {
    var sel = el("test");
    sel.innerHTML = '';
    for (x = 0; x < data[1].length; x++) {
        sel.innerHTML += '<li class="uli" >' + data[1][x][0] + '</li>';
    }
}


el("inp").onkeyup = function () {
    addScript("http://www.google.nl/complete/search?callback=suggest&q=" + this.value);
};

問題は、矢印キーを使用して提案リストに表示できるようにしたいことと、入力フィールド内に「現在の」提案値を表示したいことです。そこで、Jqueryを使用して次のようなことを試しました：

$("#inp").live("keydown", function (e) {


    var curr = $('#test').find('.current');
    if (e.keyCode == 40) {
        if (curr.length) {
            $(curr).attr('class', 'uli');
            curr = $(curr).next();
        }
        if (curr.length) {
            curr.attr('class', 'uli current');
        } else {
            $('#center li:first-child').attr('class', 'uli current');

        }
    }
    if (e.keyCode == 38) {
        if (curr.length) {
            $(curr).attr('class', 'uli');
            curr = $(curr).prev();
        }
        if (curr.length) {
            curr.attr('class', 'uli current');
        } else {
            $('#center li:last-child').attr('class', 'uli current');
        }
    }







    $("#inp").live("keydown", function (e) {
        var search_terms = $('li.current').text();

        if (e.keyCode == 40) {
            $('#inp').val(search_terms);
        }
        if (e.keyCode == 38) {
            $('#inp').val(search_terms);

        }

（私は思う..）「現在の」提案が前のコードによってすぐに要求されているため、機能しません。ここにすべてを置きました: JS Bin

4

1 に答える 1

2

なぜ車輪を再作成するのですか？

jQuery UI オートコンプリート

または、他のプラグインを見てください

コードの問題は、値を取得するために呼び出すときに矢印キーの押下をキャンセルする必要があることです。

el("inp").onkeyup = function () {
    //if not the arrow keys, fetch the list
    if( ... ){
        addScript("http://www.google.nl/complete/search?callback=suggest&q=" + this.value);
    }
}

また、el("inp")jQuery を使用している場合はどうなりますか? 見ると思っていた$("foo").keyup( function(){} );

于 2011-09-12T11:53:37.853 に答える