jQuery UI 自动完成 - 我可以更改搜索的位置吗？

Question

我正在尝试实现自动完成功能。到目前为止，我已经克服了一个障碍：沿着可选项目显示自定义信息。就此而言，我使用 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');

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

Answer 1

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

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

Answer 2

可以这样添加

$.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);
    };
});

根据@Nick Fishman's Answer，我正在根据您提供正确标签、值键的数据对象创建一个新对象