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;
                    }));
                }
            });
        }
    });
});

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

<?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);
      });
    }
  });
});

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

正如您提到的，您将获得 "large list" 个名称，我建议使用 minLength 选项。

The minimum number of characters a user must type before a search is performed. Zero is useful for local data with just a few items, but a higher value should be used when a single character search could match a few thousand items.

因此，如果您希望它更快开始响应，请考虑 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 语句中看到我们仅使用从获取的 Object 中生成的名称数据填充数组。这应该构建一个像这样的数组：

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

然后通过 JSON 回显这个完整的数组。 header 详细信息可帮助浏览器了解正在发回的数据类型。这几天的状态很好，因为 jQuery 有很多值得期待的地方。

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

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

JQueryUI Autocomplete results not showing, but coming up in DevTools

php

jquery

jquery-ui

jquery-plugins

jquery-ui-autocomplete