如何使用 html5 和 mysql 创建多个自动完成字段答案

【问题标题】：how to create several autocomplete fields with html5 and mysql如何使用 html5 和 mysql 创建多个自动完成字段
【发布时间】：2017-01-31 02:29:09
【问题描述】：

我想创建一个简单的 html 输入页面来将数据输入到 mysql db 以供以后使用。为了节省输入时间，我希望将一些字段作为自动完成字段。我找到了一个脚本here，在调整了一些值之后，它看起来像这样

<?php
//connect to mysql database
$connection = mysqli_connect("localhost","user","password","autocomplete_test")
or die("Error " . mysqli_error($connection));

//fetch data from database
$sql = "select distinct First_Name from data";
$result = mysqli_query($connection, $sql) or die("Error " . mysqli_error($connection));

?>
<!DOCTYPE html>
<html>
<head>
<title>Autocomplete Textbox in HTML5 PHP and MySQL</title>
</head>
<body>
<label for="fname">First Name</label>
<input type="text" list="firstname" autocomplete="off" id="fname">
<datalist id="firstname">
    <?php while($row = mysqli_fetch_array($result)) { ?>
        <option value="<?php echo $row['First_Name']; ?>"><?php echo $row['First_Name']; ?></option>
    <?php } ?>
</datalist>
<?php mysqli_close($connection); ?>
</body>
</html>

这对一个字段非常有效，但是当我尝试添加第二个字段时，我无法弄清楚如何使第二个字段也自动完成。在我的示例中，我想要“姓氏”的第二个字段。它在数据库中，我可以使用 while 和 echo 调用 First_Name 和 Last_Name 的所有值，以简单显示 html 部分之前的内容。无论我尝试什么，我都会自动完成第一个字段或第二个字段，或者只是两个字段的 db 中的第一个条目。请帮忙。谢谢。

【问题讨论】：

请添加您为Last_Name尝试的代码

标签： php mysql html autocomplete

【解决方案1】：

没有什么能阻止您简单地查询数据库两次并输出两个输入：

<?php
//connect to mysql database
$connection = mysqli_connect("localhost","user","password","autocomplete_test")
or die("Error " . mysqli_error($connection));

//fetch data from database
$sql1 = "select distinct First_Name from data";
$result1 = mysqli_query($connection, $sql1) or die("Error " . mysqli_error($connection));
$sql2 = "select distinct Last_Name from data";
$result2 = mysqli_query($connection, $sql2) or die("Error " . mysqli_error($connection));

?>
<!DOCTYPE html>
<html>
<head>
<title>Autocomplete Textbox in HTML5 PHP and MySQL</title>
</head>
<body>
<label for="fname">First Name</label>
<input type="text" list="firstname" autocomplete="off" id="fname">
<datalist id="firstname">
    <?php while($row = mysqli_fetch_array($result1)) { ?>
        <option value="<?php echo $row['First_Name']; ?>"><?php echo $row['First_Name']; ?></option>
    <?php } ?>
</datalist>
<label for="lname">Last Name</label>
<input type="text" list="lastname" autocomplete="off" id="lname">
<datalist id="lastname">
    <?php while($row = mysqli_fetch_array($result2)) { ?>
        <option value="<?php echo $row['Last_Name']; ?>"><?php echo $row['Last_Name']; ?></option>
    <?php } ?>
</datalist>
<?php mysqli_close($connection); ?>
</body>
</html>

【讨论】：

难以置信，我实际上就是这样（许多尝试之一），但我没有将 $result2 的变量更改为 $sql2 而是使用了 $sql1 。难怪我什么都没得到