-5

テキストフィールドとボタンを含むフォームがあります。入力を開始すると、データベースからのヒントが表示され、ボタンをクリックするか、Enterキーを押すと、検索結果が表示されます。AJAXはヒントと検索結果の両方に使用され、うまく機能しています。

問題は、ページが読み込まれた後に初めて機能することです。別の検索が必要な場合、応答しません。ページが更新されるまで以前の検索結果が表示されるだけですが、このshowhint()機能は正常に機能します。

<input type="text" id="txt"  onkeyup="showhint(this.value)"/>
<input type="button" value="search" onclick="searchresult()"/>

AJAX関数：

function searchresult() {
    var key = document.getElementById("txt").value;
    var xmlhttp;

    if(window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange = function() {
        if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("mid").innerHTML = xmlhttp.responseText;
        }
    };

    xmlhttp.open("GET","keyprocess.php?q=" + key, true);
    xmlhttp.send();
}

何が問題ですか？

4

1 に答える 1

5

初めてまたは更新時に機能する理由は、イベントハンドラーが ajax リクエスト間で永続化されていないためだと思います。このような問題を軽減するのに役立つので、jQuery を検討します。

jquery < バージョン 1.7 の場合.delegate()メソッドは次のことを行います

ルート要素の特定のセットに基づいて、現在または将来、セレクターに一致するすべての要素の 1 つ以上のイベントにハンドラーをアタッチします。

1.7 以降では、.on()メソッドを使用する必要があります。

基本的に、ページ上の要素が ajax リクエストから変更された場合でも、.delegate() または .on() メソッドは引き続きイベントを処理できます。

アップデート：

//This needs to be within the $(document).ready function
//Attach an event handler to the ID called txt that fires on changes
$("body").on("change", "#txt", function(event){
    //get the value from the input
    var $val = $(this).val();

    //Send the $val to keyprocess.php via ajax call

    //Output Results

});
于 2012-06-07T18:03:25.070 に答える