简体   繁体   English

Twitter Bootstrap,Typeahead,图片

[英]Twitter Bootstrap, Typeahead, images

I'm trying to create Typeahead search with Twitter Bootstrap 2.2.1. 我正在尝试使用Twitter Bootstrap 2.2.1创建Typeahead搜索。 I've managed to work with JSON and not strings like this: 我设法使用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;
    },
});

Now I want to do more 现在我想做更多

  1. Is it a right way to work with JSON in typeahead? 这是在typeahead中使用JSON的正确方法吗?
  2. I want to show different types of objects in drop down - suppose I have Songs and Albums types, I want to show all Songs found then divider and then all Albums found. 我想在下拉菜单中显示不同类型的对象-假设我具有“歌曲”和“专辑”类型,我想显示找到的所有歌曲,然后是分隔线,然后找到所有的专辑。
  3. I want to show images in dropdown - like covers of Albums. 我想在下拉菜单中显示图像-如相册的封面。

I've read topic here Allow loading images and custom HTML in typeahead results . 我在这里阅读了主题允许在预输入结果中加载图像和自定义HTML
Quote from that topic: "Using a combination of the item and menu options you can specify new templates" , but I still do not get how to do it in a right way. 引用该主题的话: “使用项目和菜单选项的组合,您可以指定新模板” ,但我仍然没有获得正确方法的方法。

Thank you. 谢谢。

Since typeahead processes strings with the source function I used those strings as keys to access data. 由于typeahead使用源函数处理字符串,因此我将这些字符串用作访问数据的键。

Somewhat like this 有点像这样

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

That should get you started. 那应该让您开始。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM