首页 文章

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

提问于
浏览 次
4

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

但它不起作用:(我已经google了很多但是其他人都遇到了json方面的问题 . 这是我的json数据：

[{"value":"some dude","id":"1","category":"artist"},{"value":"some other dude","id":"2","category":"artist"}]
javascript jquery jquery-ui autocomplete jquery-ui-autocomplete

3 回答

  • 0

    我很确定你的问题是你传递给自动完成的选项对象的 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/

    回复于
  • 0

    用这个：

    http://www.jensbits.com/2010/03/29/jquery-ui-autocomplete-widget-with-php-and-mysql/

    （更新）

    希望这可以帮助 ：-）

    回复于
  • 2

    默认的 _renderItem() 方法查找 item.label ，但您的json数据包含 item.value . 您需要更改encode-json.php脚本以使用 label 而不是 value ，或者您必须使用 source: 的版本来提供您自己的回调函数 .

    回复于

相关问题