使用php,mysql和jQuery实现自动完成

时间:2018-10-02 07:46:35

标签: php jquery mysql autocomplete materialize

我正在使用实现自动完成从数据库表中获取建议列表。我把源作为php文件,在其中回显json文件。下面是代码。没用为什么?

index.php

<div class="input-field ">
<input type="text" name="t" id="t" class="autocomplete">
</div>
<script>
$(function () {
$('input.autocomplete').autocomplete({
source: 'suggest.php?key=%QUERY'

});
});    
</script>

suggest.php

<?php
$key=$_GET['key'];
$array = array();
$conn = mysqli_connect('localhost', 'root', '', 'home_services');

$query= "select * from worker where lname LIKE '%{$key}%'"; 
$res = mysqli_query($conn, $query);

if($res->num_rows>0){
while($row=$res->fetch_assoc()){
$lname[]= trim($row["lname"]);

}
}
echo json_encode($lname);
?>

1 个答案:

答案 0 :(得分:0)

“物化”自动完成功能没有自动加载提供的URL的source选项。

看看documentation时,您会发现必须像这样初始化自动完成功能:

$('input.autocomplete').autocomplete({
    data: {
        "Apple": null,
        "Microsoft": null,
        "Google": 'https://placehold.it/250x250'
    },
});

data选项接受带有可选图标字符串的字符串名称。

您需要在初始化自动完成功能之前提取自动完成数据,并在初始化时将数据提供给它:

$(document).ready(function(){
    $(document).on('input', 'input.autocomplete', function() {
        let inputText = $(this).val();

        $.get('suggest.php?key=' + inputText)
            .done(function(suggestions) {
                $('input.autocomplete').autocomplete({
                    data: suggestions
                });
            });
    });
});

此外,您将需要调整suggest.php来以自动完成功能的data选项所需的格式生成JSON。因此,您需要像这样更改代码:

while($row = $res->fetch_assoc()){
    $lname[trim($row["lname"])] = null;
}

编辑:此外,您还使用名称$array初始化了数组,但将内容添加到了名为$lname的不存在的数组中。您应该将$array = array();更改为$lname = array();