jQuery UI Autocomplete 不适用于 Source 中的外部文件

Question

就是这样……我的 jQuery 代码是这样的：

jQuery:

<script type="text/javascript">
$(document).ready(function() {
    $('#val').autocomplete({
        source: "search.php",
    });
});
</script>

HTML：

<input class="searchInput" id="val" name="val" type="text" />

PHP（搜索.php）：

$con = mysql_connect("localhost","root","");
$db = mysql_select_db("x",$con);
$sql = mysql_query("SELECT * FROM opcionais WHERE Opcional LIKE 'Nokia%'");
$result = array();
while($linha = mysql_fetch_array($sql)){
    $result[] = $linha['Opcional'];
}
echo json_encode($result);

但这是交易...当我打开我的 search.php 时，它会以 json 格式显示所有结果...然后，如果我尝试自动完成，他会加载所有结果.......例如...

在我收到的 search.php 中：

["诺基亚","诺基亚 Lumia"]

好的...在自动完成中，当我输入“LUMIA”时，小部件也会加载“诺基亚”。 Buuutt.....如果我复制我在“search.php”中得到的结果并在jquery脚本中粘贴一个变量，自动完成就可以了。

任何人都知道为什么我的外部结果源不像我将结果与 jQuery 代码一起直接放在变量上那样工作吗？

在此先感谢，并为我糟糕的英语感到抱歉:-)

编辑：

所以我放了更多图片来展示发生了什么......那样它不起作用，就像 SOURCE 不能接受 "$('#val').val()"......

已解决

我自己解决了这个问题……

<script type="text/javascript">
$(document).ready(function(){
    $('#val').keyup(function(){
        var x = "search.php?ac=" + $('#val').val();
        $('#val').autocomplete({
            source: x,
            minLenght:5,
        });
    });
});
</script>

感谢所有回复 :-)

Answer 1

当您使用 javascript 变量时，自动完成 (AC) 很自然会起作用。因为 AC 本身会从该变量（数组）中找出匹配的结果。另一方面，如果您调用search.php，AC 将把它返回的任何内容作为匹配结果，并且不会尝试进一步匹配。

我实际上认为您在 PHP 脚本中的查询有些错误，您需要对其进行调试。您正在输入 LUMIA 并且脚本正在返回 ['Nokia'] 等。这意味着它正在运行此查询

SELECT * FROM opcionais WHERE Opcional LIKE 'Nokia%'

它应该运行

SELECT * FROM opcionais WHERE Opcional LIKE 'LUMIA%'

所以你去。

编辑：

看来您根本没有通过 ajax 发送关键字 LUMIA。 Check documentation。你需要做的就是这样改变js：

$('#val').autocomplete({
    source: "search.php?keyword="+$('#val').val(),
});

在 php 中：

$sql = mysql_query("SELECT * FROM opcionais WHERE Opcional LIKE 'Nokia ".$_GET['keyword']."%'");

或者为了更好的结果：

$sql = mysql_query("SELECT * FROM opcionais WHERE Opcional LIKE '%".$_GET['keyword']."%'");

此外，我建议在您的查询中使用准备好的语句，这些 mysql 函数是 outdated。

Answer 2

返回的格式应该是这样的：

[
      {
            "label": "Nokia",
            "value": "1"
      },
      {
            "label": "Lumia",
            "value": "2"
      }
]

当然会有一些变化，并且新版本的自动完成功能可能会有一些不同的风格。但始终应该是一对标签和值。

您也可以在请求中添加选项dataType: 'json'。

我认为返回那种 JSON 也可以：

{1:'Nokia',2:'Lumia'}