Twitter 引导程序 - 提前输入答案

【问题标题】：Twitter bootstrap - typeaheadTwitter 引导程序 - 提前输入
【发布时间】：2012-10-29 07:47:46
【问题描述】：

我使用 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 文件，希望这个答案对其他人有用！ :)

【问题讨论】：

我不太明白你想做什么。但是关于用户何时选择某些东西，以便将其更改为邮政编码的部分 - 这将是您需要实现的功能，而不是预先输入控件的一部分。
我会试着解释一下，:)

标签： javascript jquery twitter-bootstrap typeahead bootstrap-typeahead

【解决方案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..

    }
);

【讨论】：

如果你再次阅读我的问题，我希望你能理解吗^^ 现在我使用一个新的插件来引导，希望你仍然可以帮助我。

【解决方案2】：

您遇到的这个问题可能是由于您通过 ajax 调用的页面没有返回正确的标题。

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

【讨论】：