[英]Materialize autocomplete using php, mysql and jQuery
我正在使用实现自动完成从数据库表中获取建议列表。 我把源作为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);
?>
Materialize自动完成功能没有可自动加载提供的URL的source
选项。
查看文档时,您会发现必须像这样初始化自动完成功能:
$('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();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.