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

多分このように追加します

$.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の回答に従って、正しいラベル、値キーを供給するデータオブジェクトに基づいて新しいオブジェクトを作成しています

于 2012-10-08T22:31:26.460 に答える