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');

但现在的问题是搜索无效。我猜这是行不通的，因为它搜索对象，而不是里面对象。我想在item.codigo值中进行搜索。有没有办法做到这一点？

Answer 1

查看jQuery自动完成小部件中的“source”选项：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提供正确的标签，值键

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

2 个答案: