Question

我一直在尝试实现这一功能，允许用户从列表中进行选择，该列表是用户使用autocompelte 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
                });
              }
        })
    });
});

Jquery自动完成不显示应出现在input元素下方的值列表

1 个答案: