Jquery 自动完成功能不会自动完成 PHP、Mysql 数据

Question

我正在尝试使用 JQuery 创建一个自动完成搜索功能，但没有显示结果。在浏览器控制台中，我可以看到请求正在运行：

这是我的搜索功能

public function getAllartikelSearch()
{
    $statement = $this->connection->prepare("SELECT * FROM lievers_serienummers.artikel where artikelNummer like :keyword");
    $statement->bindValue('keyword', '%' . $_GET['term'] . '%');
    $statement->execute();
    $result = array();
    while($product = $statement->fetch(PDO::FETCH_OBJ)) {
        array_push($result, $product->artikelNummer);
    }
    echo json_encode($result);
}

这由 search.php

调用

<?php
require_once 'database.php';
require_once 'autoloader.php';

$overzichtmanager = new overzichtmanager();
$overzichtmanager->getAllartikelSearch();
?>

这是自动完成代码：

<script>
    $(document).ready(function () {
        $('#tags').autocomplete({
            source: 'search.php'
        });
    });
</script>

<body>

<header>
    <h1>Toevoegen</h1>
</header>
<div class="ui-widget">
    <label for="tags">Tags: </label>
    <input id="tags" name="term"/>
    <div id="countryList"></div>
</div>

Answer 1

你不应该从方法中使用 echo，只能使用 return。你不应该输出任何东西，除了你的控制器逻辑。还要避免在方法内部使用全局变量，而是将值作为参数传递。同样，当您可以使用 PDO 的 fetchAll() 函数时，不需要循环。

public function getAllartikelSearch($term)
{
    $sql = "SELECT artikelNummer FROM artikel where artikelNummer like :keyword";
    $statement = $this->connection->prepare($sql);
    $statement->execute(["keyword" => "%$term%"]);
    $result = $statement->fetchAll(PDO::FETCH_COLUMN, 0);
    return json_encode($result);
}

现在 search.php 看起来像这样，设置正确的 header 并将 JSON 输出到脚本。不要关闭 PHP 代码，除非在同一个文件中它后面有 HTML。

<?php
require_once 'database.php';
require_once 'autoloader.php';

$overzichtmanager = new overzichtmanager();
$json = $overzichtmanager->getAllartikelSearch($_GET["term"]);
header("Content-Type: application/json");
echo $json;

试一试，它应该运行良好。我怀疑 header 的缺失导致了问题，或者可能在 JSON 之前或之后输出了其他数据。如果问题仍然存在，请检查浏览器中的 JS 控制台是否有错误消息并编辑您的问题以包含它们。

Jquery 自动完成功能不会自动完成 PHP、Mysql 数据

Jquery autocomplete function wont autocomplete with PHP, Mysql data

php

mysql

jquery

jquery-ui-autocomplete