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

Posted 2023-05-08

【中文标题】JQueryUI 自动完成结果未显示，但出现在 DevTools 中

【英文标题】：JQueryUI Autocomplete results not showing, but coming up in DevTools

【发布时间】：2020-01-26 03:10:21

【问题描述】：

我正在使用 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);
    

?>

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

【问题讨论】：

这不是有效的 JSON

【参考方案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 中处理。

【讨论】：

这个答案和 gre_gor 绝对是问题所在。非常感谢！