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

Posted 2023-05-08

【中文标题】使用 php、mysql 和 jQuery 实现自动完成

【英文标题】：Materialize autocomplete using php, mysql and jQuery

【发布时间】：2019-03-07 07:47:03

【问题描述】：

我正在使用物化自动完成功能从我的数据库表中获取建议列表。我将源代码作为 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>

建议.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】：

Materialize 自动完成没有自动加载提供的 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();

【讨论】：

它不工作。我不明白 jQuery 部分。为什么 $lname 数据为空？对不起，我是 jQuery 的新手

您在 jQuery 方面到底有什么不明白的地方？ $lname 数据现在填充了名称作为键和 null 值，因为自动完成期望的 JSON 格式是 'name': 'image', ... 或 'name': null, ...。因此，您需要一个以名称为键、图像或空值作为值的数组，以便json_encode 将从数组中创建正确的 JSON 格式。

.done 不起作用。控制台说无法读取未定义的属性“完成”