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（search.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并且脚本正在返回['诺基亚']等。这意味着它正在运行此查询

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'}