0

サイトにオートコンプリート関数を追加したいのですが、1つのテキストボックスで非常にうまく機能するjsコードを使用するこのガイドを見つけました：http ：//www.sks.com.np/article/9/ajax-autocomplete-using-php -mysql.html

ただし、複数のオートコンプリートを追加しようとすると、最後の1セットであるため、最後のtetboxのみが機能します。

jsスクリプトの変数を設定する関数は次のとおりです

function setAutoComplete(field_id, results_id, get_url)
{

// initialize vars
acSearchId  = "#" + field_id;
acResultsId = "#" + results_id;
acURL       = get_url;

// create the results div
$("#auto").append('<div id="' + results_id + '"></div>');

// register mostly used vars
acSearchField   = $(acSearchId);
acResultsDiv    = $(acResultsId);

// reposition div
repositionResultsDiv();

// on blur listener
acSearchField.blur(function(){ setTimeout("clearAutoComplete()", 200) });

// on key up listener
acSearchField.keyup(function (e) {

    // get keyCode (window.event is for IE)
    var keyCode = e.keyCode || window.event.keyCode;
    var lastVal = acSearchField.val();

    // check an treat up and down arrows
    if(updownArrow(keyCode)){
        return;
    }

    // check for an ENTER or ESC
    if(keyCode == 13 || keyCode == 27){
        clearAutoComplete();
        return;
    }

    // if is text, call with delay
    setTimeout(function () {autoComplete(lastVal)}, acDelay);
});
}

1つのテキストボックスに対して、次のような関数を呼び出すことができます

$(function(){      
setAutoComplete("field", "fieldSuggest", "/functions/autocomplete.php?part=");
});

ただし、複数のテキストボックスを使用する場合、これをどのように実行すればよいかわかりません。これは私が試したものですが、機能しませんでした。

$('#f1').focus(function (e) {   
    setAutoComplete("f1", "fSuggest1", "/functions/autocomplete.php?q1=");
}
$('#f2').focus(function (e) {   
    setAutoComplete("f2", "fSuggest2", "/functions/autocomplete.php?q2=");
}

ご協力いただきありがとうございます。

4

1 に答える 1

0

関数を同じページの複数の要素で機能させるには、クラスを使用する必要があります。固定 ID をドロップし、 forEach を実行して、そのクラスを持つすべての要素をターゲットにするだけです。

于 2012-11-04T17:10:09.250 に答える