Javascript 使用类别和远程数据源自动完成

我想做的是通过jQueryUI函数使用自动完成对结果进行分类。经过一些谷歌搜索等，我发现它有一个内置的功能(http://jqueryui.com/demos/autocomplete/#categories)但该示例仅适用于本地数据源（javascript中的数组）。我正在处理一个远程数据源。它的自动完成端在没有添加类别代码的情况下运行良好，但在添加时会中断

这意味着php代码很好（返回json数据的搜索页面）

我从jQueryUI站点获取了以下代码：

$.widget( "custom.catcomplete", $.ui.autocomplete, {
                _renderMenu: function( ul, items ) {
                    var self = this,
                    currentCategory = "";
                $.each( items, function( index, item ) {
                if ( item.category != currentCategory ) {
                    ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
                    currentCategory = item.category;
            }
            self._renderItem( ul, item );
        });

但它不起作用：（我在谷歌上搜索了很多，但其他人对它的json方面都有问题。以下是我的json数据：

[{"value":"some dude","id":"1","category":"artist"},{"value":"some other dude","id":"2","category":"artist"}]

使用以下命令：

（更新）

---

希望这有帮助：-）

默认的

\u renderItem（）

方法查找

项.label

，但json数据包含

项.value

。您需要更改encode-json.php脚本以使用

label

而不是

value

，或者您必须使用

source:

的版本，在该版本中您可以提供自己的回调函数。

我很确定您的问题是传递给autocomplete的options对象的

source

属性：

$("#search").catcomplete({
    delay:0,
    source: "query/encode-json.php?term="+ $("#search").val(),
    select: function(event, ui){
        alert(ui.item.label);
    }
});    

source

将在实例化小部件时计算一次。换句话说，

$（“#search”）.val（）

不会在用户每次键入时执行

由于默认情况下，autocomplete在查询字符串中向上发送

术语

，因此您应该能够执行以下操作：

$("#search").catcomplete({
    delay:0,
    source: "query/encode-json.php",
    select: function(event, ui){
        alert(ui.item.label);
    }
}); 

---

我很确定其他一切都是正确的，因为使用数组作为带有类别的本地数据源很好：

我认为您不理解这个问题。我需要像jqueryui链接中那样的类别来处理php查询。我的php查询与json数据（包括正在传递的类别信息）一起工作，但我无法显示它的类别部分。我尝试了，但没有工作。将值与标签交换。谢谢，虽然这根本不是真的。在调用

\u renderItem

之前很久，自动完成项就被规范化为一致的格式。我认为，只有在使用一种紧凑形式的源代码（返回字符串数组）时，才会发生规范化。如果AJAX调用返回对象，那么规范化如何知道应该使用对象中的哪个属性？通常的方法是使用回调函数提取完成数据，但他没有这样做。改回value，它仍然有效。所以耶：）很高兴它能工作，我想：）谢谢你的尝试。还是不行。我在添加的内容中添加（？term=“+$（“#搜索”）.val（），）的原因是需要将输入的值传递给尝试查找类似值的php脚本。当您键入越来越多（忽略类别）时，它确实会缩小当前结果的范围.你说它没有分类就可以工作？这很奇怪…如果你打开Firebug，请求看起来正确吗？你有一个可以公开访问的网站，我可以随时查看吗？下面我们来解释一下。右上角的搜索使用（尝试的）分类代码。较大的搜索使用预先存在的代码等（并且有效）。因此，您将看到增值位是如何工作的等。谢谢：）并开始键入sam或st。编辑：firefox中存在一些css问题。我知道。还没有费心查看它们。看起来您的脚本顺序有一些问题-<代码>$（窗口）上出现JS错误.loadcode。确保在加载其他脚本之前先加载jQuery。当我在有问题的文本框中键入时，我没有看到任何AJAX请求

$("#search").catcomplete({
    delay:0,
    source: "query/encode-json.php",
    select: function(event, ui){
        alert(ui.item.label);
    }
});