Jquery自动完成未显示应出现在输入元素下方的值列表

Posted 2023-05-08

【中文标题】Jquery自动完成未显示应出现在输入元素下方的值列表

【英文标题】：Jquery autocomplete not showing the list of values that should appear below the input element

【发布时间】：2018-09-19 09:50:43

【问题描述】：

我一直在尝试实现允许用户从列表中进行选择的功能，该列表是在用户使用自动完成 jquery api 在输入元素中键入文本时创建的。但是，我的实现没有按预期工作，目前，我能够在用户键入时将文本记录到控制台，但相同的文本没有按应有的方式绑定到输入元素。也就是说，允许用户从列表中选择他们的选项的选项。

我能够使用 $getJSON 方法完成所需的结果，但是，此方法仅在数据源未更改时才有效。当我尝试获取用户在文本框中输入的文本时，此方法不起作用。

$(document).ready(function()
    $("#autocomplete1").keyup(function()
        $.ajax(
              type: "POST",
              url: "search1.php",
              data:'keyword='+$(this).val(),
              success: function(data)
                console.log(data);
                $("#autocomplete1").autocomplete(
                   source: data
                );
              
        )
    );
);

search1.php的内容如下：

header("Content-Type", "application/json");
$items = get_merchant_name_by_user_input($_POST['keyword']);
echo json_encode($items);

返回的JSON数据格式为：

[
   "value":"amazob","label":"amazob",
   "value":"Amazon","label":"Amazon",
   "value":"amazon","label":"amazon"
]

【问题讨论】：

与dataType:"JSON" 有效吗？

是的。实际上我没有意识到我没有包含 dataType:"JSON"。

叹气，谢谢@FelippeDuarte

没问题。我已经写了一个答案来记录它。

您还应该看看jqueryui.com/autocomplete/#remote-with-cache，因为您可以执行此逻辑，而无需在每次按键时重新初始化自动完成源。忽略缓存部分。

【参考方案1】：

只需使用dataType: "JSON"

$(document).ready(function()
    $("#autocomplete1").keyup(function()
        $.ajax(
              type: "POST",
              dataType: "JSON",
              url: "search1.php",
              data:'keyword='+$(this).val(),
              success: function(data)
                console.log(data);
                $("#autocomplete1").autocomplete(
                   source: data
                );
              
        )
    );
);