Question

I have been attempting to get a Twitter Bootstrap autocompleter working with a Spring MVC annotated controller.

I have the following 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>

and the following 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>

when a type three letters I am seeing the correct request to my controller which is returning a single supplier object as JSON:

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

However, the text field is not showing the returned supplier. Can anyone provide any help as to why this isn’t working?

Answer 1

process() expects an array of strings instead of an array of objects. Thus, instead of passing it an object, pass it an array with the contents that you want to be shown on the text field, i.e., [ "test" ].

Also, as a suggestion, to use typeahead with remote sources, I’d suggest using this plugin instead. Amongst other things, it allows you to use an array of objects instead of an array of strings.