javascript - javascript ajax innerHTML の混乱

Question

そのため、javascript を使用して php ファイルからクエリを取得し、それを別の javascript に発行して、別の php クエリを別のテキスト領域に配置します。

言い換えると：

[input text area 1] -> [javascript live search] -> [Query results]
[Query results] -> [onClick event] -> [Load results in text area 2]

アイデアは、あるテキストエリアでのライブ検索が、別のライブでの近似一致で出てくるというものです。

ただし、2番目のテキストエリアにデータをロードしようとすると、生データとして出てきます。ちゃんと見ようか迷ってます。

HTML:

最初のテキスト領域は、スクリプトを呼び出す関数を含む入力です。これは次のとおりです。

 function showResult(str) {
     if (str.length == 0) {
         document.getElementById("livesearch").innerHTML = "";
         document.getElementById("livesearch").style.border = "0px";
         return;
     }
     if (window.XMLHttpRequest) {
         xmlhttp = new XMLHttpRequest();
     } else {
         xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
     }
     xmlhttp.onreadystatechange = function () {
         if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
             document.getElementById("livesearch").innerHTML = xmlhttp.responseText;
             document.getElementById("livesearch").style.border = "1px solid #000";
         }
     }
     xmlhttp.open("GET", "ajax-search.php?keyword=" + str, true);
     xmlhttp.send();
 }

PHP は次の結果を返します。

echo '<li onclick="grabID('.$row['dir_id'].')" >'.$row['eng_dir'].'</li><br />';

次に、クリックされたイベントを開始します。

function grabID(num){
xmlhttp.open("GET","ajax-result.php?result="+num,true);
xmlhttp.send();
document.getElementById("output").innerHTML="Something here?!?!?!";
}

もう一度、他の php からの結果が正しく返されます。問題は、これがループであるため、1 つではなく多くの結果が返されることです。前の検索の ID に一致する 1 つの結果が必要なだけです。