与MySQL数据库的jQuery UI自动完成

我正在努力与jQuery自动完成整天。我无法弄清楚如何将jQuery UI自动完成与mysql数据库连接起来。我不知道PHP文件应该是什么样子，如何请求发送到PHP等。在jQuery网站上的演示和文档中有一个简单的例子，远程数据源的源代码是：source：“search.php”。那么search.php如何知道我在输入框中输入的内容？有没有查询附加到search.php：/我注意到，json被使用..我很困惑，我已经尝试过没有结果的打法。我需要的是简单的自动填充，包含我输入到文本框中的文本的城市名称。与MySQL数据库的jQuery UI自动完成

我的数据库看起来像：

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

，我需要自动完成给我看城市包含文字我已经输入到文本框，例如

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

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

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

谢谢！

来源

2012-01-16 woopata

你只需要返回一个JSON编码的id/value对象数组。自动完成插件还会发送一个名为“q”的get参数，其中包含当前输入框中的内容。一个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以执行小写比较（因此忽略大小写）等其他此类增强功能，但这至少应使您朝着正确的方向前进。

来源

2012-01-16 18:24:54 Parrots

谢谢，这解决了一半的问题，我didn不知道这个请求是通过名为“q”的参数发送的，其他一半的问题是jQuery ..当我用简单的jQuery使用你的php代码时，返回的是所有城市，而不仅仅是匹配城市：$（“#cities”）。自动完成（{ 源： “脚本/ loc.php”，的minLength：4，选择：功能（事件，UI）{ 警报（ui.item.id）; } }）; – woopata 2012-01-16 18:49:05

查看Firebug for Firefox或使用Safari/Chrome内置的开发模式 - 非常适合调试ajax调用并查看发送到/来自服务器的内容。 – Parrots 2012-01-16 18:51:13

我还没有使用过jQuery的自动完成功能，但看起来很清楚，它会将AJAX调用回您的Web服务器，提供已经在框中键入的数据。 Web服务器将按照您认为合适的方式查询数据库，并返回应显示的结果。

该查询不会成为jQuery插件的一部分;你必须自己写。

来源

2012-01-16 18:12:52

是的，我看到在一些例子中使用了ajax（$ .ajax ..），但我不明白它在jQuery UI演示和文档 - >远程数据源中如何工作。当你点击查看该示例的源代码时，只有源代码：“”search.php“没有$ .ajax .. – woopata 2012-01-16 18:23:34

我想'search.php'接受一个表单值;当调用php文件时，它抓住表单值，查询数据库，并返回一个结果集给调用者（在本例中为插件），然后显示结果。这部分是你有困难？ – 2012-01-16 18:35:25

与MySQL数据库的jQuery UI自动完成

回答

相关问题