2

我正在尝试实现自动完成。到目前为止，我已经克服了一个障碍：沿着可选项目显示自定义信息。就此而言，我使用 JSON 对象传递数据。就像这样：

[{"codigo":"XL","descripcion":"Extra Large"},{"codigo":"M","descripcion":"Medium"},{"codigo":"S","descripcion":"Small"},{"codigo":"L","descripcion":"Large"}]

现在初始化代码是：

$this->template->add_js("$.getJSON(\"".base_url('talles/listar')."\", 
            function(data)
            {
                $('#txt_talle')
                    .autocomplete(
                        {
                            minLength: 0,
                            source: data,
                            focus: function(event, ui) { 
                                $('#txt_talle').val(ui.item.codigo);
                                return false;
                            },
                            select: function(event, ui) {
                                $('#txt_talle').val(ui.item.codigo);
                                return false;
                            }
                        })
                    .focus(function(){ $('#txt_talle').autocomplete('search') })
                    .data('autocomplete')._renderItem = function(ul, item) {
                        return $('<li></li>')
                        .data('item.autocomplete', item)
                        .append('<a>' + item.codigo + '|' + item.descripcion + '</a>')
                        .appendTo(ul);
                    }
                ;
            });", 'embed');

但现在的问题是搜索不起作用。我猜这不起作用，因为它搜索对象，而不是对象内部。我想让它在 item.codigo 值中搜索。有没有办法做到这一点？

4

2 回答 2

4

查看 jQuery 自动完成小部件中的“源”选项：http: //api.jqueryui.com/autocomplete/#option-source。它要么需要一个字符串数组，要么需要一个具有label和value属性的对象数组。

尝试向talles/listar 服务器调用中返回的 JSON 数组的每个项目添加label和属性。value

于 2012-10-08T22:20:01.613 回答
0

Maybe add it like this

$.getJSON("URL", function(data){
    var autoc = [];
    for (row in data) {
        if (data.hasOwnProperty(row)) {
            autoc[] = {
                'label': row.codigo,
                'value': row.descripcion
            }
        } 
    }
    $('#txt_talle').autocomplete({
            minLength: 0,
            source: autoc,
            focus: function(event, ui) { 
                $('#txt_talle').val(ui.item.codigo);
                return false;
            },
            select: function(event, ui) {
                $('#txt_talle').val(ui.item.codigo);
                return false;
            }
    }).focus(function(){
        $('#txt_talle').autocomplete('search')
    }).data('autocomplete')._renderItem = function(ul, item) {
        return $('<li></li>')
        .data('item.autocomplete', item)
        .append('<a>' + item.codigo + '|' + item.descripcion + '</a>')
        .appendTo(ul);
    };
});

I'm creating a new object based on your data object feeding the right label, value keys, as per @Nick Fishman's Answer

于 2012-10-08T22:31:26.460 回答