jquery - 使用 PHP 自动完成

Posted 2023-05-08

技术标签:

【中文标题】jquery - 使用 PHP 自动完成【英文标题】：jquery - autocomplete with PHP 【发布时间】：2017-11-11 14:23:44 【问题描述】：

我尝试使用 jQuery-UI 自动完成搜索字段，但使用 php 作为源时遇到问题。当我使用变量作为源时，一切正常。

JS：

$(function () 
    var data = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "javascript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $("#tags").autocomplete(
        source: data
    );
);

但是一旦我使用 PHP 脚本，即使它只是保存一个数组并对其进行编码，它也不会。

JS：

$(function () 
    $("#tags").autocomplete(
        source: 'suggest_search.php'
    );
);

suggest_search.php：

$data = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
echo json_encode($data);

我就是不知道为什么，有什么建议吗？

编辑：所以原来的问题已经解决，只是一个链接问题。

现在我想从 SQL 中获取数据，但我无法弄清楚我又在哪里犯了错误..

我的phpcode：

<?php
header('Content-Type: application/json');
include(scripts/db_connect.php);
$searchTerm = filter_input(INPUT_GET, 'term');
$select = mysqli_query($db_mysqli, " SELECT * FROM $db_table WHERE top_name like '%$searchTerm%'");
while ($row=mysqli_fetch_array($select)) 

 $data[] = $row['top_name'];

echo json_encode($data);

以及相关的html代码：

<div id="ui-widget">
                    <label for="tags"></label>
                    <input id="tags" class="search_field" type="search" name="suche" maxlength="255">
</div>

【问题讨论】：

你能尝试一个ajax调用，看看它以这种方式返回什么吗？甚至可以将 ajax 结果保存到变量中 【参考方案1】：

这不是那么简单，我真的不知道为什么，但是当你绑定到本地数组时，一个简单的数组可以工作，但是如果你绑定到远程源，你需要给出一个结果此结构的对象数组：


    "id":"Tetrao tetrix",
    "label":"Black Grouse",
    "value":"Black Grouse"

查看我从this page 获取的结果：

https://jqueryui.com/resources/demos/autocomplete/search.php?term=rou

因此，您的结果应该与该结构匹配才能正常工作，因为我在 api docs 中找不到与数据结构相关的任何内容。

【讨论】：

不是 json_encode() 这样做吗？将我的数组转换为该结构？ @whatever.idc 当然不是。它如何知道正确的结构。此外，您的数组只是一个简单的数组。你需要一个对象（类）数组。【参考方案2】：

您必须在数据源文件中使用 JSON 标头。

<?php
header('Content-Type: application/json');
$data = [
  "ActionScript",
  "AppleScript",
  "Asp",
  "BASIC"
];
echo json_encode($data);

HTML 文件内容；

<html>
<head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>
<body>

  <input id="tags">

  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script type="text/javascript">
     $(function() 
        $( "#tags" ).autocomplete(
           source: 'json.php' 
        );
     );
  </script>

</body>
</html>

【讨论】：

感谢您提醒我使用控制台。问题是我将源文件的路径提供给 js 文件。那是错误的 - 我必须相对于 html 文件给出它：/

以上是关于jquery - 使用 PHP 自动完成的主要内容，如果未能解决你的问题，请参考以下文章

带有检查名称的 PHP 文件的 jQuery 自动完成

使用 php、mysql 和 jQuery 实现自动完成

用 PHP 数组填充 JQuery 自动完成

自动完成 jQuery / PHP / MySQL 不返回结果

为啥使用 jQuery 和 PHP 的多项选择自动完成功能不起作用？