0

我正在尝试使用 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. 我想在下拉列表中显示图像 - 比如专辑的封面。

我在这里阅读了主题Allow loading images and custom HTML in typeahead results。
引用该主题：“使用项目和菜单选项的组合，您可以指定新模板”，但我仍然不知道如何以正确的方式进行操作。

谢谢你。

4

1 回答 1

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;
    }

那应该让你开始。

于 2013-05-16T15:49:21.673 回答