Question

我需要onkeyup不止一次发射，但似乎只发射一次！

当我在输入框中输入内容时，会进行搜索，但每当我退格并搜索其他内容时，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输入到下拉列表中，因此当我点击其中一个名称时，它会自动填充输入框。

谢谢！

Answer 1

OnKeyUp每个事件只会触发一次。按'A''B'和'C'将导致三次调用suggest1（）;

要确保您的浏览器正常运行，请尝试以下

 <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更改。

直接指出实际问题，我有两个未知数。你的PHP不会为零条目查询输出任何内容，如果查询LIKE只匹配一个东西，则只会输出1个项目。我认为你的问题出在其他地方，而不是onkeyup

对您系统/浏览器上的onkeyup进行T测试：尝试将一些调试头（如echo strlen($text).'<br />';）添加到PHP文件中。对于添加或删除文本的每个按键（包括退格键），您应该看到数字更改而不依赖于SQL查询。

您的代码看起来很好。并且使用http://ivanzuzak.info/urlecho/

处的公共HTTP GET回显服务为我运行正常

为echo服务换掉你的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>

Answer 2

仍然不确定您的密钥组件每个页面加载时只触发一次的问题。没有看到更多的代码，很难合理地推测。从来没有，这是一个例子，我只是把你如何以更有用的方式呈现返回的数据。

代码要求您下载我在之前的评论中提到的AjaxRequest库。（http://ajaxtoolbox.com/request/）

在这里，我演示了一些原则。

将数据安排到php类
构建此类的实例数组
将此数组作为JSON
捕获JSON文本并将其转换回JS中的对象
处理数据

我给出了两个非常简单的例子 - 第一个简单地将当前目录中的所有文件名（包含jsonDir.php）加载到select元素中。选择文件名会导致它被复制到按钮旁边的文本输入中。

第二个，只检索png文件的名称。它将它们全部放入选择元素中。然而，这次，当选择一个项目时，它被用作图像的src。在每种情况下，只有在按下相应按钮时才会抓取文件名。有一些冗余/其他糟糕的代码我可以做得更好，但是醒了20个小时后，我已经准备好睡觉了！

code preview image

希望它对你有用。有问题，请问。：）

<强> 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>

Answer 3

发现我的问题。查询未正确处理！

我有变量$ dam_text作为LIKE语句，它应该是$ dam：

<?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 />';
    }

}
?>

此外，变量$ dam未在函数内部提交，因此我将其从'if'语句移到函数中：

<?php

//connect to db stuff here

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

function getSuggest($text) {

    $dam = $_GET['dam_text'];

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

    $query = mysql_query($sqlCommand);

    $result_count = mysql_num_rows($query);

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

}
?>

以上代码完美无缺！原来它毕竟不是onkeyup！谢谢你的帮助！

onkeyup函数只触发一次

3 个答案: