JQuery UI 自动完成未过滤 php 文件返回的响应文本

Question

JQuery UI 本地数组传递的自动完成显示过滤结果。
这是代码：

var localArray = ["BASIC","C++","Fortran","Haskell","JavaScript","PHP","Scheme"];
$( "#tags" ).autocomplete({
    source: localArray
});

但是当我将 php 文件传递给源标记（返回相同的数组）时，现在自动完成显示（整个数据）未过滤的结果，无论按下哪个字符（匹配或不匹配）。
这是代码：

$( "#tags" ).autocomplete({
    source: "PHP_Code/MyAjax.php?page=tut_search_ac"
});

这是PHP文件：

$query = "SELECT title FROM tutorial";
$rs = mysql_query($query) or die(mysql_error()." in query $query");
if($rs)
{
    while($row = mysql_fetch_array($rs))
    {
        $contents[] = $row['title'];
    }
}

echo json_encode($contents);

它总是显示数组的所有值。你也可以看看HERE.
请给我一些解决方案。
提前致谢。

Answer 1

使用 source 属性作为远程资源而不是本地 requires 您的数据采用特定格式。具体来说，每个项目都是一个 JSON 对象，同时具有 label 和 value 属性。更改您的 PHP 脚本以输出您的 JSON 数据，如下所示：

[
  { label: "BASIC", value: "BASIC" },
  { label: "C++", value: "C++" },
  { label: "Fortran", value: "Fortran" },
  { label: "Haskell", value: "Haskell" },
  { label: "JavaScript", value: "JavaScript" },
  { label: "PHP", value: "PHP" },
  { label: "Scheme", value: "Scheme" }
]

要从您的 PHP 中获取此结构，您需要一个具有以下格式的 PHP 数组：

$contents[] = array( "label" => "BASIC", "value" => "BASIC" );
$contents[] = array( "label" => "C++", "value" => "C++" );
$contents[] = array( "label" => "Fortran", "value" => "Fortran" );
$contents[] = array( "label" => "Haskell", "value" => "Haskell" );
$contents[] = array( "label" => "JavaScript", "value" => "JavaScript" );
$contents[] = array( "label" => "PHP", "value" => "PHP" );
$contents[] = array( "label" => "Scheme", "value" => "Scheme" );

echo json_encode($contents);

您还可以在这里查看如何操作 jquery ui 以适合您的数据：

https://jqueryui.com/autocomplete/#custom-data

Answer 2

我意识到了这个问题。上面的代码没有任何实际错误，只是缺乏概念。
JQuery只在本地过滤JavaScript给出的数组。
但不过滤php/server-side返回的响应文本。
因此我们必须在 php 文件中包含过滤代码。（这也是理想的）

$keyward = $_REQUEST['term']; //term is equal to keyword
$query = "SELECT title FROM tutorial WHERE title LIKE '%$keyward%' ORDER BY title";
$rs = mysql_query($query) or die(mysql_error()." in query $query");
if($rs)
{
    while($row = mysql_fetch_array($rs))
    {
        $contents[] = $row['title'];
    }
}

echo json_encode($contents);

如有不妥之处请在评论中反馈。

JQuery UI 自动完成未过滤 php 文件返回的响应文本

JQuery UI auto-complete is not filtering the response text returned by php file

javascript

jquery

json

jquery-ui

jquery-ui-autocomplete