Twitter Bootstrap，Typeahead，图片

Question

我正在尝试使用Twitter Bootstrap 2.2.1创建Typeahead搜索。 我设法使用JSON，而不是像这样的字符串：

$('#search').typeahead({
    minLength: 3,
    source: function (query, process) {
    $.post('@Url.Action(<MySearchAction>, <MyControllerName>)', { Text: query }, function (data) {
            var source = [];
            $.each(data, function (index, value) {
                source.push(JSON.stringify(value));
            });
            process(source);
        });
    },
    updater: function (item) {
        var itemJSON = JSON.parse(item);
        window.location.href = '@Url.Action(<MyDetailsAction>, <MyControllerName>)/' + itemJSON.ID;
    },
    highlighter: function (item) {
        var itemJSON = JSON.parse(item);
        return itemJSON.Name;
    },
});

现在我想做更多

1. 这是在typeahead中使用JSON的正确方法吗？
2. 我想在下拉菜单中显示不同类型的对象-假设我具有“歌曲”和“专辑”类型，我想显示找到的所有歌曲，然后是分隔线，然后找到所有的专辑。
3. 我想在下拉菜单中显示图像-如相册的封面。

我在这里阅读了主题允许在预输入结果中加载图像和自定义HTML 。
引用该主题的话： “使用项目和菜单选项的组合，您可以指定新模板” ，但我仍然没有获得正确方法的方法。

谢谢。

Answer 1

由于typeahead使用源函数处理字符串，因此我将这些字符串用作访问数据的键。

有点像这样

$('#search').typeahead({
    myData: {"key":{image:"image.jpg",description:"lorem blahblah"}},
    source: //Load data in a function
        //add data to myData with the key being the string you would process, 
        //and the value being an object you want to get values from

    highlighter: function(item){
        var item = this.options.myData[item];
        var image = item.image;
        var description = item.description
        return "<img src='"+image+"'>" so on and so forth;
    }

那应该让您开始。