个人中心
gpt4 book ai didi

javascript - onkeyup 函数仅触发一次

转载 作者：行者123 更新时间：2023-11-30 01:12:44 25 4
gpt4 key购买 nike

我需要 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 中，因此当我单击其中一个名称时，它会自动填充输入框。

谢谢!

最佳答案

仍然不确定您的问题，即每个页面加载时只触发一次键盘。在没有看到更多代码的情况下，很难合理地推测。尽管如此，这里有一个我刚刚整理的示例，说明如何以更有用的方式呈现返回的数据。

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

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

  1. 将数据整理到 php 类中
  2. 构造此类的实例数组
  3. 将此数组作为 JSON 返回
  4. 捕获 JSON 文本并将其转回 JS 中的对象
  5. 处理数据

我给出了 2 个非常简单的示例 - 第一个简单地将当前目录(包含 jsonDir.php)中的所有文件名加载到 select 元素中。选择文件名会将其复制到按钮旁边的文本输入中。

第二个，仅检索 png 文件的名称。它还将它们全部放入选择元素中。然而这一次，当选择一个项目时，它将用作图像的源。在每种情况下，仅当按下相应的按钮时才会抓取文件名。有一些冗余/否则蹩脚的代码，我本来可以做得更好，但在清醒 20 小时后，我准备 sleep 了!

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>

关于javascript - onkeyup 函数仅触发一次，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19337567/

25 4 0
文章推荐： php - MySQL 和 PHPExcel 中的 UTF8 字符问题
文章推荐： android - 如何使用 android sqlite 和 contentvalue 进行批量替换
文章推荐： php - 注册错误 - 注册脚本上的变量未设置
文章推荐： php - 调用两个不同mysql表的数据
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com