使用 mysql 数据库的 jQuery UI 自动完成

Question

我整天都在为 jQuery 自动完成而苦苦挣扎。我无法弄清楚如何将 jQuery UI 自动完成功能与 mysql 数据库连接起来。我不知道 php 文件应该是什么样子，如何将请求发送到 php 等。在 jQuery 站点上的演示和文档中，有一个简单的远程数据源示例，其中源为：源：“search.php”。那么 search.php 如何知道我在输入框中输入了什么？ search.php 没有附加查询：/ 我注意到使用了 json .. 我很困惑，我尝试了十几种没有结果的方法。我需要的是简单的自动完成，其中包含我在文本框中输入的文本的城市名称。

我的数据库看起来像：

table_cities:
-------------
id:   -city id
name: -city name

我需要自动完成来显示包含我在文本框中输入的文本的城市，例如

“po”将导致“利物浦”“朴茨茅斯”...

html
----
<input type="text" id="cities" />

js
--
$( "#cities" ).autocomplete({
...

谢谢！

Answer 1

您只需要返回一个 JSON 编码的 id/value 对象数组。自动完成插件还发送一个名为“q”的获取参数，其中包含当前输入框中的内容。一个简单的search.php 文件示例：

$autocomplete_value = mysql_real_escape_string($_GET["q"]);
$sql = "select id, name from table_cities where name LIKE '%$autocomplete_value%'";
$query = mysql_query($sql);

$results = array();
while ($row = mysql_fetch_array($query, MYSQL_ASSOC)) {
    array_push($results, array('id' => $row['id'], 
                               'value' => $row['name']) );
}
echo json_encode($results);

你需要适应你可能使用的任何 PHP 框架，但模式应该是相同的 - 循环通过结果创建一个 'id' 和 'value' 对象的数组，然后对其进行 json 编码。

编辑：您可能希望更新 SQL 以进行小写比较（因此忽略大小写）和其他此类增强功能，但这至少应该让您朝着正确的方向前进。

Answer 2

我没有使用过 jQuery 自动完成功能，但似乎很清楚，它会向您的 Web 服务器进行 AJAX 回调，提供已在框中输入的数据。 Web 服务器将根据您的需要查询数据库，并返回应显示的结果。

查询不会是 jQuery 插件的一部分；你必须自己写。

Answer 3

你可以在while循环中使用".="。

$data = "";
while($row = mysqli_fetch_assoc($result))
{
$data .= "bla bla bla..."
}