onkeyup函数仅触发一次
[英]onkeyup function only firing once
问题描述
我需要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）搜索到下拉列表中，因此当我单击其中一个名称时，它会自动填充输入框。
谢谢！
3 个解决方案
解决方案1
0 2013-10-12 19:08:59
每个事件只会触发一次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
T对系统/浏览器上的onkeyup进行测试：尝试添加一些调试标头，例如echo strlen($text).'<br />'; 到您的PHP文件。 您应该看到数字变化，而不必每次添加或删除文本（包括退格键）时都依赖于SQL查询。
您的代码看起来不错。 使用http://ivanzuzak.info/urlecho/上的公共HTTP GET echo服务对我来说运行良好
将您的PHP换成echo服务可以正常工作（稍有键入延迟）
<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>
解决方案2
0 2013-10-12 22:46:27
仍然不确定您的keyup问题仅在每次页面加载时触发一次。 在没有看到更多代码的情况下很难进行合理的推测。 不过，这只是一个示例，我只是综合了如何以更有用的方式显示返回的数据。
该代码要求您下载我在前面的注释中提到的AjaxRequest库。 （ http://ajaxtoolbox.com/request/ ）
在这里，我演示了一些原则。
- 将数据安排到php类中
- 构造此类的实例数组
- 将此数组作为JSON返回
- 捕获JSON文本并将其变回JS中的对象
- 处理数据
我给了2个非常简单的示例-第一个示例只是将当前目录（包含jsonDir.php）中的所有文件名加载到select元素中。 选择文件名会导致文件名被复制到按钮旁边的文本输入中。
第二，仅检索png文件的名称。 还将它们全部都放入选择元素中。 但是，这次，当选择一个项目时，它将用作图像的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>
解决方案3
0 已采纳 2013-10-13 05:41:44
找出我的问题。 查询未正确处理！
当它应该是$ dam时，我将变量$ dam_text作为LIKE语句：
<?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函数
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.