用户键入字母时如何使用 ajax 自动完成来显示 MySQL 数据库中的值
Posted
技术标签:
【中文标题】用户键入字母时如何使用 ajax 自动完成来显示 MySQL 数据库中的值【英文标题】：How to use ajax auto complete to display values from a MySQL database when user types a letter 【发布时间】：2015-05-29 04:55:02 【问题描述】：我在显示来自 mysql 的数据时遇到问题。我希望当我在输入字段中键入一个字母时，来自数据库的值将显示相关值。
例如，我输入 A，它将显示与该产品相关的所有值。以下是我的代码 - 请提供您的建议。
<!DOCTYPE>
<html>
<head>
<script type="text/javascript">
var hxmlhttp = false;
if(window.XMLHttpRequest)
//for newer browser except ie6
xmlhttp = new XMLHttpRequest();
else
//for ie6 and below
xmlhttp = new ActiveXObjectt("Microsoft.XMLHTTP");
function askGoogleSuggest()
var input = document.getElementById("textField");
if(input.value)
getData("select.php?qu=" + input.value,"targetDiv");
else
var targetDiv = document.getElementById("targetDiv");
targetDiv.innerHTML = "<div></div>";
function getData(dataSource, divId)
if(xmlhttp)
var obj = document.getElementById(divId);
xmlhttp.open("GET",dataSource,true);
xmlhttp.onreadystatechange = function()
if(xmlhttp.readyState == 4 && xmlhttp.status==200)
obj.innerHTML = xmlhttp.responseText;
xmlhttp.send(null);
</script>
</head>
<h2>Langpayan Trademark</h2>
<form >
Search for <input type="text" id="textField"
name="textField" onkeyup = "askGoogleSuggest()">
</form>
<div id="targetDiv">
<p>it will display values</p>
<div></div>
</div>
</body>
select.php
<?php
$dbc = mysqli_connect('localhost','root','black98765','activity_8a')
OR die("Cannot connect to MySql: ". mysqli_connect_error());
$display = "SELECT bug.* , product.*, hardware.hardware_brand, software.software_name, solution.solution_name, bug_hardware.*
FROM bug
JOIN product ON bug.product_no = product.product_no
JOIN bug_hardware ON bug.bug_no = bug_hardware.bug_no
JOIN hardware ON hardware.hardware_no = bug_hardware.hardware_no
JOIN software ON software.software_no = bug_hardware.software_no
JOIN solution ON solution.bug_no = bug.bug_no
WHERE product_name like '%on%'";
$re = mysqli_query($dbc, $display);
if($re)
echo "<table border=1 id='table_form'>
<tr>
<th>Product Name </th>
<th>Name of Bug </th>
<th>Brand Name</th>
<th>Operating System</th>
<th>Solution</th>
<tr>";
while($row = mysqli_fetch_assoc($re))
echo "<tr>";
echo "<td>".$row['product_name']."</td>";
echo "<td>".$row['bug_name']."</td>";
echo "<td>".$row['hardware_brand']."</td>";
echo "<td>".$row['software_name']."</td>";
echo "<td>".$row['solution_name']."</td>";
echo "</tr>";
echo "</table>";
else
echo "Cannot fetch data";
?>
【问题讨论】：
您的问题是什么？您发布的代码不起作用吗？ FWIW，除非您有一个无法使用 jQuery 的用例，否则您可能需要研究 jQuery 和 jQuery UI 自动完成功能，这完全符合您的要求，并且只需最少的编码工作。 @mituw16 是的，代码似乎不起作用，当我在输入字段上输入单词时，它不会显示建议。我对使用 jquery 不是很熟悉。你能给我示例代码吗？ Google 是您的朋友。有大量关于 jQuery 和 jQuery UI 自动完成的教程 只是一个提示：由于检查数据库非常昂贵，我建议使用 oninput 而不是 onkeyup，因为每次在输入元素聚焦时按 ANY 键都会触发 onkeyup get，而 oninput 只会获取当输入元素的值发生变化时触发 @JayGorio 如果我错了，请纠正我，但您没有将id 参数传递给您尝试将数据写入元素的getData 函数。所以将getData的调用改为getData("select.php?qu=" + input.value, "targetDiv");可能会解决问题
【参考方案1】：
问题在对话中得到解决：
函数getData在askGoogleSuggest函数内部调用时错过了divId参数。
WHERE product_name like '%on%'"; 行也必须更改为 WHERE product_name like '".$_GET['qu']."%'"; 才能按 OP 的预期运行
【讨论】：
以上是关于用户键入字母时如何使用 ajax 自动完成来显示 MySQL 数据库中的值的主要内容，如果未能解决你的问题，请参考以下文章
Ajax 自动完成（或自动建议）与 TAB 完成/自动填充类似于 shell 命令行完成？
如何在 Laravel 5.7 中将多个数据库数据传递到 jQuery 的自动完成（AJAX）中