从我输入的数据中填充多个输入字段

Question

很多地方需要了解如何做到这一点，但我没有成功。

我有一个名为'callsign'的输入字段，当你键入它出去一个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代码那样在服务器上执行的，所以如果你有一个onkeyup事件，其中包含一个JavaScript函数，你会看到它在页面加载后执行，即使是，只要用户正在输入正确的输入字段。

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

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代码之间填写组件。