在我键入时从 MySQL 填充多个输入字段

Question

很多地方可以看，有很多想法如何做到这一点，但我没有成功。

当您输入时，我有一个名为“呼号”的输入字段，它会输出到 MySQL 表并根据您已经输入的内容返回建议。我想要关于值应该出现在输入字段中的提示，以便我可以选择其中一个或继续输入。当我选择我想要的时候我也想填写Fname字段，它也是从MySQL返回的，见下面的XML。

我真的很想学习如何做到这一点，但是使用我只能理解的术语进行冗长的解释不会像示例那样深入。救命！

输入看起来像这样：

 Call Sign: <input type='text' value='' placeholder='Search' id='cs1' style='text-transform:uppercase' autofocus onkeyup='showHint(this.value)'>&nbsp;&nbsp;Name: <Input type='text' name='Fname'style='text-transform:capitalize'>

这样的 MySQL：

 <?php
 require_once "dbConnectDtls.php";
 $q = $_REQUEST["q"];
 $stmt = $db_found->prepare("SELECT DISTINCT callsign, Fname
    FROM NetLog 
    WHERE recordID IN (SELECT max(recordID) 
    FROM NetLog 
    WHERE callsign LIKE ? GROUP BY callsign)"); 
 $stmt->execute(array("$q%"));
 $result = $stmt->fetchAll();
 print_r($result);
 ?>

上面使用q = 'w' 运行测试 MySQL 的结果返回：

Array ( [0] => Array ( [callsign] => W0DLK [0] => W0DLK [Fname] => Deb [1]
=> Deb ) [1] => Array ( [callsign] => W0GPS [0] => W0GPS [Fname] => 
John [1] => John ) [2] => Array ( [callsign] => WA0TJT [0] => WA0TJT 
[Fname] => Keith [1] => Keith ) [3] => Array ( [callsign] => W0KCN [0] 
=> W0KCN [Fname] => Net Control [1] => Net Control ) )

我的功能是这样的：

 function showHint(str) {
    if (str.length == 0) {
        document.getElementById("txtHint").innerHTML = "";
        return;
    } else {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
            }
        }

        xmlhttp.open("GET", "gethint.php?q=" + str, true);
        xmlhttp.send();
    }
  }

Answer 1

您尝试实现的功能是一种搜索/自动完成功能，简单来说，它接受输入字符串并返回显示在用户输入框下方的相关结果。

看起来您正在尝试做的是将 onkeyup 属性绑定到提交搜索字符串的 PHP 函数（这是您定义的 <input> 字段的内容。据我所知, 以这种方式使用 PHP 将不起作用，因为您的 onkeyup 属性中的 PHP 代码只会在您的页面最初加载时执行一次，并且不会在用户开始输入后再次执行。

解决这个问题的高级术语是使用 JavaScript 作为用户输入/HTML“前端”和 PHP/MySQL“后端”之间的中介。创建 JavaScript（特别是 jQuery 库）是为了帮助您完成此类任务。 JavaScript 在客户端的浏览器中执行，而不是像 PHP 代码那样在服务器上执行，因此如果您有一个带有 JavaScript 函数的 onkeyup 事件，您将看到它甚至在页面之后执行 已加载，只要用户在正确的输入字段中输入。

所以，你想做的是这样的：

1. 使用onkeyup="someJavaScriptFunction()" 属性创建您的输入字段。这将在每次有人键入时触发 someJavaScriptFunction()。
2. someJavaScriptFunction() 将在您页面的其他位置定义，并包含在 <script> 标记中。
3. 您的 JavaScript 函数首先必须获取 <input> 框的内容。
4. 接下来，它需要使用jQuery 库的AJAX 函数向您的PHP 代码发送POST 请求。
5. 然后，您的 PHP 代码将执行一些幕后工作，与您的 MySQL 数据库通信，根据输入字符串获取所需的建议结果，并将它们返回给客户端。
6. AJAX 函数的 success 组件将以某种数据字符串的形式接收这些结果，您需要对其进行解析以转换为 JavaScript 数组或对象
7. 您将需要使用 jQuery 或更多的 JavaScript 来在输入框下方显示结果，并且可能需要使用更多的 HTML 和不同的 JavaScript 函数来使它们可点击。

我强烈建议通过一些 JavaScript 和 jQuery 教程来了解这些东西是如何工作的。您可能需要熟悉一些内容，以便填写 HTML 和 PHP 代码之间的组件。