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＆＃34;前端＆＃34;之间的中介。和PHP / MySQL＆＃34;后端＆＃34;。创建JavaScript（特别是jQuery库）来帮助您完成这样的任务。 JavaScript是在客户端的浏览器中执行的，而不是像PHP代码那样在服务器上执行，所以如果你有一个带有JavaScript函数的onkeyup事件，你会看到它甚至在后执行页面已加载，只要用户输入正确的输入字段。

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

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

我强烈建议您阅读一些JavaScript和jQuery教程，以了解这些内容的工作原理。您可能需要熟悉一些事项，以便在HTML和PHP代码之间填写组件。

在我键入

1 个答案: