database - jquery ui 自动完成数据库

Question

我想使用 jQuery UI 自动完成功能从我的数据库中加载列表，但我不知道应该使用哪种方法。

我尝试使用“远程数据源”方法 http://jqueryui.com/demos/autocomplete/#remote , 但它显然不起作用。

我有以下代码:

js:

$(function() {
    $("#client").autocomplete({
    source: "nom.php",
    minLength: 2,
        select: function(event, ui) {
        alert(ui);
        }
    });
});

html:

<label for="client">Client</label>
<input name="client" id="client" class="ui-autocomplete ui-widget-content ui-corner-all" />

PHP:

$query = "SELECT nom from personne";
$result = mysql_query($query, $db);

while($row = mysql_fetch_assoc($result)) {

foreach($row as $val)
    $tab[] = $val;

}

print json_encode($tab);

无论我输入什么，它都会显示所有值，但是当我复制 nom.php 的结果并将其粘贴到源旁边时:它确实有效...

谢谢你的 Helm

Answer 1

问题是您没有在服务器端过滤结果。

当您使用本地集合时，本地集合会被自动完成功能自动过滤。

但是，当使用远程源时，源应该进行过滤。我想这是为了节省带宽，以便服务器只发送匹配的项目，而不是所有项目，让浏览器在它结束时进行过滤。

当调用您的服务器端方法时，自动完成还会发送一个名为 term 的参数，您可以使用该参数进行过滤。

您可以在您的 php 脚本中像这样获取输入的值:

 $term = trim(strip_tags($_GET['term']));

然后在您的 foreach 中，仅将与过滤器匹配的项目添加到您的集合中，然后再将其发回。