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

Question

我一直在尝试实现允许用户从列表中进行选择的功能，该列表是在用户使用自动完成 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"}
]

Answer 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
                });
              }
        })
    });
});