JQuery自动完成

时间:2012-10-09 13:04:53

标签: jquery jquery-ui jquery-autocomplete

我在Jquery自动完成器中输入内容时得到错误的建议。 就像我输入" ja"那么它应该只显示那些从" ja'但它显示了所有。

我希望将这个自动完成器的值存储到一些隐藏字段,但我无法做到。我是生成的jSON格式。所以我想将名称显示为标签,并希望赋值到一些隐藏的领域。 [{"id":1,"name":"Java"},{"id":2,"name":"Liferay"},{"id":3,"name":".Net"}

下面的

是我的代码段。

$("input#auto").autocomplete({
    source:function( request, response ) {
        $.ajax({
            url: '<portlet:resourceURL />',
            dataType: "json",
            data: {
                featureClass: "P",
                style: "full",
                maxRows: 12,
                name_startsWith: request.term
            },
            success: function(data) {
                response($.map(data, function(item) {
                    return {
                        label: item.name, 
                        value: item.id, 
                    }                      
                }));
            },                                  
        });
    },
    minLength: 2,
    dataType: "json",           
    select: function (event, ui) {  
        $("#skillName").val(ui.item.value);           
    }
});

任何帮助将不胜感激。感谢

1 个答案:

答案 0 :(得分:1)

自动填充代码似乎是正确的。看起来可能是web服务没有返回您正在寻找的结果。

此外,如果您希望将名称显示为标签,则应将“name”重命名为“label”,因为这是jquery自动完成默认使用的键,用于显示下拉列表中的项目。

例如:

{"id":1,"name":"Java"},{"id":2,"name":"Liferay"},{"id":3,"name":".Net"}

可能是

{"id":1,"label":"Java"},{"id":2,"label":"Liferay"},{"id":3,"label":".Net"}

{"id":1,"name":"Java","label":"Java"},{"id":2,"name":"Liferay","label":"Liferay"},{"id":3,"name":".Net","label":".Net"}

您可以做的另一件事是使用自定义渲染器通过执行以下操作来显示名称中的值:

Input.autocomplete()..data('autocomplete')._renderItem = function (ul, item) {
       return $('<li></li>')
        .data('item.autocomplete', item)
        .append('<a class="ui-corner-all">' + item.name + '</a>')
        .appendTo(ul);
       }