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属性用作远程资源而非本地属性要求您的数据采用特定格式。具体来说，每个项目都是一个具有label和value属性的JSON对象。更改您的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文件返回的响应文本

2 个答案: