1

私は、TwitterBootstrapオートコンプリートをSpringMVC注釈付きコントローラーで動作させることを試みてきました。

私は次のHTMLを持っています：

<div class="control-group">
            <label class="control-label" for="name">Supplier</label>
            <div class="controls">
                <input id="supplier" name="supplier" class="input-xlarge" data-provide="typeahead" type="text"/>    
            </div>
        </div>

および次のJavaScript：

<script src="/resources/js/jquery.js"></script>
    <script src="/resources/js/bootstrap.js"></script>
    <script type="text/javascript">

    $('#supplier').typeahead({
        source: function (query, process) {
            return $.get('http://localhost:8080/supplier/search', { query: query }, function (data) {
                return process(data);
            });
        },

        minLength : 3,
        items : 4,
        property: 'name'
    });
    </script>

3文字を入力すると、コントローラーへの正しいリクエストが表示され、単一のサプライヤーオブジェクトがJSONとして返されます。

{"supplier":{"name":"test","id":0,"version":0,"url":null}}

ただし、テキストフィールドには返品されたサプライヤが表示されていません。なぜこれが機能しないのかについて誰かが助けを提供できますか？

4

2 に答える 2

2

process()オブジェクトの配列ではなく、文字列の配列が必要です。したがって、オブジェクトを渡す代わりに、テキストフィールドに表示する内容を含む配列を渡します。[ "test" ]

また、提案として、typeaheadリモートソースで使用するには、代わりにこのプラグインを使用することをお勧めします。特に、文字列の配列の代わりにオブジェクトの配列を使用できます。

于 2012-09-16T16:58:08.817 に答える
1 
$('#supplier').typeahead({
        source: function (query, process) {
            return $.get('http://localhost:8080/supplier/search', { query: query }, function (data) {
                return process(data);
            });
        },
Replace the above code to the below one

$('#supplier').typeahead({
    source: function(typeahead, query) {
        $.ajax({
            url: "http://localhost:8080/supplier/search')?>",
            dataType: "json",
            type: "POST",
            data: {
                max_rows: 15,
                search_key: query,
                ajax: 1
            },
            success: function(data) {
                var return_list = [], i = data.length;
                while (i--) {
                    return_list[i] = {Name: data[i].Name, value: data[i].Name'};
                }
                typeahead.process(return_list);
            }
        });
    },
    onselect: function(obj) {
        $('[name="name"]').val(obj.id);
    }
});
于 2012-09-16T17:00:40.123 に答える