如何更改 ajax 结果的自动完成

Question

我制作了一个简单的文本框来接受用户输入。我将该信息通过 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>

我的 PHP（ajax_search.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>";
    }

}

我不知道如何处理结果以将它们传递给自动完成源。谢谢

Answer 1

我看到的问题是 autocomplete source property requires an array 作为输入，而您似乎传递了 HTML。您也许可以使用 split 来转换它：

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

更新

如果您想在代码中使用 jQuery 自动完成功能，则需要包含 jQuery UI 的代码文件。我看到您已经在使用 Google 托管库。您可以返回那里并找到要包含的正确库 for jQuery UI。顺便说一下，您需要 CSS 和 JS 文件。

如何更改 ajax 结果的自动完成

how to change autocomplete from ajax results

javascript

ajax

jquery

jquery-ui

jquery-ui-autocomplete