javascript - 自动完成类别和远程数据源

Question

我想做的是通过 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 );
        });

然后我将它与它的搜索端结合起来(更改为类别):

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

但它不起作用 :( 我在谷歌上搜索了很多，但其他人都对它的 json 方面有疑问。这是我的 json 数据:

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

Answer 1

我很确定你的问题是你传递给自动完成的选项对象的 source 属性:

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

当您实例化小部件时，

source 将被评估一次。换句话说，$("#search").val() 不会在用户每次键入时都执行。

由于默认情况下自动完成会在查询字符串中发送 term，您应该能够做到:

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

我很确定其他一切都是正确的，因为使用您的数组作为本地数据源与类别工作正常:http://jsfiddle.net/jadPP/