Question

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

MY JS CODE：

<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。您可以使用拆分来转换它：

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结果中的自动填充

1 个答案: