JQueryUI 自动完成结果未显示，但出现在 DevTools 中

Question

我正在使用 JQueryUI 自动完成和 PHP 为我们的 MySQL 服务器上的大量人员创建一个基本搜索框，但当我输入实际提示时，结果下拉列表不会显示。

我已经在 DevTools 中检查过，根据我的任期，数据很好。

Search Term

DevTools Results Here

$(function() {
    $("#search").autocomplete({
        source: function(request, response) {
            $.ajax({
                type: "GET",
                url: "search.php",
                data: {
                    term: $("#search").val()
                },
                dataType: "json",
                success: function(data) {
                    response($.map(data, function(item) {
                        return item.Name;
                    }));
                }
            });
        }
    });
});

我不确定这是否是插件本身的问题，因为它有点过时了，但我很困惑为什么我的结果都不会显示。

<?php
    require_once 'db.php';

    $search = $_GET['term'];

    $search = "%".$search."%";

    $searchAlumni = $pdo->prepare("SELECT CONCAT(Last,', ', First) AS Name FROM Constituents WHERE Last LIKE :last");
    $searchAlumni->bindParam(':last', $search);
    //$searchAlumni->bindParam(':first', $search);
    $searchAlumni->execute();

    while($result = $searchAlumni->fetch()) {
        echo json_encode($result);
    }

?>

任何帮助或建议将不胜感激。

Answer 1

主要问题可能出在您的 PHP 中。当您想要构建一个数组然后回显数组值时，您正在收集结果，然后逐行回显它们。还有一些你可以改进你的 JavaScript 的地方。

JavaScript

$(function() {
  $("#search").autocomplete({
    minLength: 3,
    source: function(request, response) {
      $.getJSON("search.php", { term: request.term }, function(data) {
        var results = [];
        $.each(data, function(i, name){
          results.push(name);
        });
        response(results);
      });
    }
  });
});

这与您的代码没有太大区别。使用$.getJSON() 只是您在$.ajax() 中所写内容的简写。这里的好处是你总是会得到一个结果数组，即使是空的。所以它总是会触发响应。

正如你提到的，你会得到一个“大名单”的名字，我建议使用minLength 选项。

在执行搜索之前用户必须输入的最少字符数。零对于只有几个项目的本地数据很有用，但当单个字符搜索可以匹配几千个项目时，应该使用更高的值。

因此，如果您希望它尽快开始响应，请考虑 2。例如，如果用户输入“jo”，您的结果可能包括：“jon”、“john”、“joanna”、“bojon”等...使用3，用户将输入“joh”，但仍然获取“john”，但它会更快且结果集更小。

PHP

<?php
require_once 'db.php';
$search = $_GET['term'];
$searchAlumni = $pdo->prepare("SELECT CONCAT(Last,', ', First) AS Name FROM Constituents WHERE Last LIKE :last");
$searchAlumni->bindParam(':last', "%$search%");
$searchAlumni->execute();
$results = array();
while($result = $searchAlumni->fetch(PDO::FETCH_OBJ)) {
  array_push($results, $result->Name);
}
header('Content-Type: application/json');
echo json_encode($results);
?>

同样没有太大的不同。您可以在while 语句中看到，我们仅使用来自获取的对象的结果名称数据填充数组。这应该构建一个像这样的数组：

[
  "Smith, John",
  "Smith, Jane"
]

然后通过 JSON 回显这个完整的数组。标头详细信息可帮助浏览器了解正在发回的数据类型。现在它只是很好的形式，因为 jQuery 做了很多期待。

您还应该考虑如果出现查询错误该怎么办以及如何在 PHP 中处理该错误，将什么发送回 JavaScript，以及如何在 JS 中处理。