Javascript 如何从ajax结果更改自动完成

我制作了一个简单的文本框来接受用户输入。在每次输入时，我通过ajax将该信息传递到PHP页面，以获得结果。我可以在输入框下方的DIV中显示这些结果，但无法更改自动完成结果

我的JS代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<input type="text" name="search" id="search" >
<div id="test"></div>


<script type="text/javascript">

var availableTags = null;

$('#search').on('input', function() {

        var input_txt = $('#search').val();

          $.ajax({
            url: "ajax_search.php",
            method: "get",
            data: { input: input_txt },
            success: changeInput

            });
});


function changeInput(content){
    $("#test").html(content);

    availableTags = content;

    $("#search").autocomplete({
        source: availableTags
    });
}


</script>

我的ajax_search.PHP的PHP

$input = $_GET['input'];

if(!empty($input))
{
$stmt = $conn->prepare('SELECT * FROM cities WHERE city LIKE :input');
$stmt->execute(array('input' => $input.'%'));


while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) 
    {
        echo $row['city']."<br>";
    }

}

我不知道如何处理结果以将其传递给autocomplete的源。谢谢

我看到的问题是，作为输入，您似乎正在传递HTML。您可以使用“拆分”将其转换为：

availableTags = content.split("<br>");
$("#search").autocomplete( "option", "source", availableTags); //<==jquery docs suggest this method
$("#search").autocomplete({ source: availableTags }); //<==OP suggests this works

更新

---

如果您想在代码中使用jqueryautocomplete，那么需要包含jqueryui的代码文件。我看到你已经在使用谷歌托管库了。您可以回到那里，找到要包含的正确库。顺便说一下，您需要CSS和JS文件。

确切的要求是什么problem@Shi-我无法将我的AJAX结果自动完成输入文本AvailableTags包含数组，对吗？@Sahil我不这么认为。。。如何将AJAX结果传递到JS数组中？您的右侧@user301784它不起作用，但即使我尝试这样做：var availableTags=[11,22,33]；它也不起作用，所以可能还有另一个问题。嘿，我试着让它起作用，我也打算发布它。@user301784嘿，看起来更新源代码需要一种特殊的方法。我已经更新了我的答案。或者我应该说这是我链接到上面的jQuery UI网站上的文档中显示的方法好的，谢谢，我已经添加了jQuery UI和CSS，但它不适用于选项。。。但是它是这样工作的：$search.autocomplete{source:availableTags}；