Question

一旦用户键入函数触发器并查询数据库以获取数字，我就尝试将自动完成功能添加到我的输入字段之一。

这是输入域代码

<div class="input-field col s12 m3 offset-m1 l2 offset-l1">
<input id="NumEmpleado" name="NumEmpleado" type="text" class="validate autocomplete" autocomplete="off" required="">
<label for="NumEmpleado">N° de Empleado</label>
</div>

这是脚本代码：

<script>
    $(document).ready(function(){
        $(document).on('input', 'input.autocomplete', function() {
            let inputText = $(this).val(); //Gets text from input
            $.get('suggest.php?key=' + inputText) //Makes the query
                .done(function(suggestions) {  //gets JSON data as suggestions 
                console.log(suggestions); //Prints
                    $('input.autocomplete').autocomplete({ //Initialize auto complete with new data
                        data: suggestions
                    });
                });
        });
    });
</script>

这是proposal.php-在用户键入时触发

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

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

if($res->num_rows>0){
while($row = $res->fetch_assoc()){
$NumEmpleado[trim($row["NumEmpleado"])] = null;
}
}
echo json_encode($NumEmpleado);
flush();
?>

到目前为止，我已经注意到了这些事情：

当我在查看控制台的同时按输入栏上的空格键时，json数据与数据库上的数据完全相同

当我按1时，应该给我“ 31”作为唯一的自动完成选项，它显示2个选项，而这些不是来自JSON数据，由于某种原因，它尝试显示图像（src：uknown）

也尝试加载一些东西

如果我输入9，它应该给我3个选项； 9、93和98

再一次，它试图到达某个地方。

感谢您阅读，祝您有愉快的一天。

Answer 1

jQuery自动完成功能在初始化期间接受修订键和值（标签和值）。因此，首先，您必须将结果转换为特定的键值，如下所示。

 $(document).ready(function(){
        $( "#tags" ).autocomplete({
            source: function(request, response) {
                $.ajax({
                    url: 'suggest.php?key=' + $('#text_box_id').val(),
                    dataType: "json",
                    type: "GET",
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {
                        response($.map(data.d, function (item) {
                            return {
                                label: item[0],
                                val: item[1]
                            }
                        }))
                    }
                });
            }
        });
    });

这可能会对您有所帮助。

我的自动完成功能会忽略我的JSON数据并显示随机数

1 个答案: