1

我一直在尝试让 Twitter Bootstrap 自动完成器与 Spring MVC 带注释的控制器一起工作。

我有以下 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>

当输入三个字母时，我看到了对控制器的正确请求，该请求将单个供应商对象作为 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 回答