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

问题描述

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

我已经检查了 DevTools，根据我的术语，数据很好。

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

?>

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

标签： phpjqueryjquery-uijquery-pluginsjquery-ui-autocomplete

主要问题可能在您的 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);
      });
    }
  });
});

这与您的代码没有太大区别。Using$.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 中处理它。

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

问题描述

解决方案

推荐阅读