Twitter引导程序-提前输入

Question

我使用Twitter Bootstrap并提前输入。

我下载了插件：Twitter Bootstrap Typeahead插件扩展

而且这么长时间如此好，当我使用静态javascript json数组时，它的工作原理。

$('#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
    });

当我尝试使用ajax时，它会做大量工作，我的代码如下所示。

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

并且它返回这个json数组（我可以在所有方面重建它，而我无法使其工作）

[
    { 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' }
]

插件主页。 https://github.com/tcrosen/twitter-bootstrap-typeahead

我希望enybardy可以在这里帮助我:)

非常感谢大家的帮助，:)

编辑-问题解决！ :)只需要添加header("content-type: application/json"); 到我的PHP文件中，这个答案对其他极有用的人！ :)

Answer 1

我不认为typeahead可以读取您的数组source ，因此我将首先对其进行解析。

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

您遇到的此问题可能是由于您通过ajax调用的页面未返回正确的标题而引起的。

如果您使用的是PHP，请尝试添加header('Content-type: application/json'); 到包含JSON数组的文档。