0

onkeyup を複数回起動する必要がありますが、起動するのは 1 回だけのようです。

入力ボックスに何かを入力すると検索されますが、バックスペースして他の何かを検索するたびに、div は同じままです..

これが私のコードです：

<script type="text/javascript">
function suggest1() {
    var dam_text = document.getElementById('dam').value;

    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else {
        xmlhttp = new ActiveXObject('MicrosoftXMLHTTP');
    }
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById('myDiv').innerHTML = xmlhttp.responseText;
        }
    }
    var target = 'dam_search.php?dam_text=' + dam_text;
    xmlhttp.open('GET', target, true);
    xmlhttp.send();
}
</script>

<input type="text" name="dam" id="dam" onkeyup="suggest1();"><br />
<div id="myDiv"></div>

ここにdam_search.phpがあります

<?php

//connect to db stuff here

if (isset($_GET['dam_text'])) {
    $dam = $_GET['dam_text'];
    getSuggest($text);
}

function getSuggest($text) {

    $sqlCommand = "SELECT `name` FROM `table1` WHERE `name` LIKE '%$dam_text%'";

    $query = mysql_query($sqlCommand);

    $result_count = mysql_num_rows($query);

    while ($row = mysql_fetch_assoc($query)) {
        echo $row['name'].'<br />';
    }

}
?>

また、検索した名前の戻り値をdivではなく入力ボックスからドロップダウンに入れる方法を考えているので、名前の1つをクリックすると、入力ボックスが自動的に入力されます。

ありがとうございました！

4

3 に答える 3

0

OnKeyUp は、イベントごとに 1 回だけ発生します。「A」「B」「C」を押すと、suggest1() が 3 回呼び出されます。

ブラウザが正しく動作していることを確認するには、これを試してください

 <script type="text/javascript">
 function suggest1() {
     document.getElementById('myDiv').innerHTML = document.getElementById('dam').value;
 }
 </script>
 <input type="text" name="dam" id="dam" onkeyup="suggest1();"><br />
 <div id="myDiv"></div>

入力でキーストロークが発生するたびに div が変化するはずです。

あなたの実際の問題を直接指摘するには、2 つの多くの不明な点があります。PHP はゼロ エントリ クエリに対しては何も出力せず、クエリ LIKE が 1 つのものにのみ一致する場合は 1 つのアイテムのみを出力します。あなたの問題は、onkeyupではなく、他の場所にあると思います

システム/ブラウザで onkeyup をテストする: echo strlen($text).'<br />';PHP ファイルなどにデバッグ ヘッダーを追加してみてください。テキストを追加または削除するキーを押すたびに (バックスペース キーを含む)、SQL クエリに依存しなくても数値が変化することがわかります。

あなたのコードは問題ないようです。そして、 http://ivanzuzak.info/urlecho/にあるパブリック HTTP GET エコー サービスを使用して、問題なく動作します。

PHP をエコー サービス用に交換しても問題なく動作します (入力に少し時間がかかります)。

<script type="text/javascript">
function suggest1() {
    var dam_text = document.getElementById('dam').value;

    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else {
        xmlhttp = new ActiveXObject('MicrosoftXMLHTTP');
    }
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById('myDiv').innerHTML = xmlhttp.responseText;
        }
    }
    var target = 'http://urlecho.appspot.com/echo?body=' + dam_text;
    xmlhttp.open('GET', target, true);
    xmlhttp.send();
}
</script>

<input type="text" name="dam" id="dam" onkeyup="suggest1();"><br />
<div id="myDiv"></div>
于 2013-10-12T19:08:59.770 に答える
0

キーアップがページの読み込みごとに 1 回だけ起動するという問題についてはまだわかりません。これは、さらにコードを見ずに合理的に推測するのは非常に困難です。とはいえ、返されたデータをより便利な方法で表示する方法をまとめた例を次に示します。

このコードでは、以前のコメントで言及した AjaxRequest ライブラリをダウンロードする必要があります。( http://ajaxtoolbox.com/request/ )

ここでは、いくつかの原則を示します。

  1. データを php クラスに配置する
  2. このクラスのインスタンスの配列を構築する
  3. この配列を JSON として返す
  4. JSON テキストをキャッチして JS のオブジェクトに戻す
  5. データの処理

私は 2 つの非常に単純な例を示しました。ファイル名を選択すると、ボタンの横にあるテキスト入力にコピーされます。

2 つ目は、png ファイルの名前のみを取得します。それらもすべてselect要素にチャックします。ただし今回は、項目が選択されると、画像の src として使用されます。いずれの場合も、対応するボタンが押された場合にのみ、ファイル名が取得されます。少し冗長な/そうでなければもっとうまくできたはずのくだらないコードがありますが、20時間起きた後、私は寝る準備ができています!

コードのプレビュー画像

お役に立てば幸いです。ご不明な点がございましたら、お気軽にお問い合わせください。:)

1.jsonDir.php

<?php
class mFile
{
    public $name, $time, $size;
}

if (!isset($_GET['wildcard']))
    $wildCard = "*.*";
else
    $wildCard = $_GET['wildcard'];

foreach (glob($wildCard) as $curFilename)
{
    $curFileObj = new mFile;
    $curFileObj->name = $curFilename;
    $curFileObj->time = date("d/m/Y - H:i", filectime($curFilename));
    $curFileObj->size = filesize($curFilename);
    $fileArray[] = $curFileObj;
}
printf("%s", json_encode($fileArray));
?>

2. readDir.html

<!DOCTYPE html>
<html>
<head>
<script type='text/javascript' src='script/ajaxRequestCompressed.js'></script>
<script>
function byId(e){return document.getElementById(e);}
function newEl(tag){return document.createElement(tag);}

function myGetAjaxResponseWithCallback(url, target, callbackFunc)
{
  AjaxRequest.get(
    {
      'url':url,
      'onSuccess':function(req){ callbackFunc(req.responseText, target); }
    }
  );
}

function getResults1()
{
    var url = "jsonDir.php";
    var target = byId('resultsDiv');
    myGetAjaxResponseWithCallback(url, target, jsonDataReceived1);
}

function getResults2()
{
    var url = "jsonDir.php?wildcard=*.png";
    var target = byId('resultsDiv2');
    myGetAjaxResponseWithCallback(url, target, jsonDataReceived2);
}

function jsonDataReceived1(responseText, targetContainer)
{
    var resultObject = JSON.parse(responseText);
    targetContainer.innerHTML = "";

    var mStr = "There were " + resultObject.length + " records returned" + "<br>";
    var mSel = newEl("select");

    mSel.addEventListener('change', doAutofill, false);

    var i, n = resultObject.length;
    for (i=0; i<n; i++)
    {
        var curRecordOption = new Option(resultObject[i].name, i);
        mSel.appendChild(curRecordOption);
    }
    targetContainer.innerHTML = mStr;
    targetContainer.appendChild(mSel);
}

function jsonDataReceived2(responseText, targetContainer)
{
    var resultObject = JSON.parse(responseText);
    targetContainer.innerHTML = "";

    var mSel = newEl("select");
    mSel.addEventListener('change', showSelectedImg, false);

    var i, n = resultObject.length;
    for (i=0; i<n; i++)
    {
        var curRecordOption = new Option(resultObject[i].name, i);
        mSel.appendChild(curRecordOption);
    }
    targetContainer.innerHTML = '';
    targetContainer.appendChild(mSel);
}


function doAutofill(e)
{
    var curSelIndex = this.value;
    var curText = this.options[curSelIndex].label;
    byId('autofillMe').value = curText;
}

function showSelectedImg(e)
{
    byId('previewImg').src = this.options[this.value].label;
}

</script>
<style>
img
{
    border: solid 2px #333;
}
</style>
</head>
<body>
    <button onclick='getResults1()'>Get *.* dir listing</button> <input id='autofillMe'/>
    <div id='resultsDiv'></div>
    <hr>
    <button onclick='getResults2()'>Get *.png dir listing</button> <img id='previewImg' width='100' height='100'/>
    <div id='resultsDiv2'></div>
</body>
</html>
于 2013-10-12T22:46:27.980 に答える