Twitter引导程序-提前输入

Question

i use Twitter Bootstrap and typeahead.

i download the plugin: Twitter Bootstrap Typeahead Plugin Extension

and so long so good, its working when i use a static javascript json array eg.

$('#demo1').typeahead({
        source: [
            { id: 9000, name: 'Aalborg' },
            { id: 2, name: 'Montreal' },
            { id: 3, name: 'New York' },
            { id: 4, name: 'Buffalo' },
            { id: 5, name: 'Boston' },
            { id: 6, name: 'Columbus' },
            { id: 7, name: 'Dallas' },
            { id: 8, name: 'Vancouver' },
            { id: 9, name: 'Seattle' },
            { id: 10, name: 'Los Angeles' }
        ],
        itemSelected: displayResult
    });

When i try to use ajax its will do enerything, my code look like this.

$('.typeahead').typeahead({
            ajax: '/actions/search/synonymSearch',
            itemSelected: displayResult
        });

and its return this json array ( i can rebuild its on all ways, and i can't get it to work )

[
    { id: 1, name: 'Toronto' },
    { id: 2, name: 'Montreal' },
    { id: 3, name: 'New York' },
    { id: 4, name: 'Buffalo' },
    { id: 5, name: 'Boston' },
    { id: 6, name: 'Columbus' },
    { id: 7, name: 'Dallas' },
    { id: 8, name: 'Vancouver' },
    { id: 9, name: 'Seattle' },
    { id: 10, name: 'Los Angeles' }
]

The plugin home pages. https://github.com/tcrosen/twitter-bootstrap-typeahead

i hobe enybardy can help me here :)

thanks a lot for all helping, :)

EDIT - Problem resovle! :) Just need to added header("content-type: application/json"); into my PHP file, hobe this answere are usefull for orther peopole! :)

Answer 1

I don't think typeahead can read the source of your array and therefore I would parse it first.

var data = [{"id":"9000","name":"Aalborg"},{"id":"9220","name":null},{"id":"9210","name":null},{"id":"9200","name":"Aalborg SV"}];

// using underscore.js get an array of the city names
var cities = _.pluck(data, "name");

// now start typeahead
$el.typeahead(
    source: cities,
    // the value of the `city` selected gets passed to the onselect  
    onselect: function(city) {
         // get the index of city selected from the data array
         var i = _.indexOf(data, city);
         // then using the index get what ever other value you need from the array
         // and insert in the DOM etc..

    }
);

Answer 2

This problem you are experiencing may be due to the page that you are calling via ajax isn't returning the right headers.

If you are using PHP try adding header('Content-type: application/json'); to the document that contains the JSON array.