Twitter Bootstrap, Typeahead, изображения

Я пытаюсь создать поиск Typeahead с помощью Twitter Bootstrap 2.2.1. Мне удалось работать с 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. Это правильный способ работы с JSON в typeahead?
  2. Я хочу показать различные типы объектов в раскрывающемся списке - предположим, у меня есть типы песен и альбомов, я хочу показать все найденные песни, затем разделитель, а затем все найденные альбомы.
  3. Я хочу показывать изображения в раскрывающемся списке - например, обложки альбомов.

Я читал тему здесь Разрешить загрузку изображений и пользовательского HTML в результатах ввода.
Цитата из этой темы: "Используя комбинацию пункта и пунктов меню, вы можете указать новые шаблоны", но я до сих пор не понимаю, как это сделать правильно.

Спасибо.


jquery twitter-bootstrap bootstrap-typeahead
person Roman Pekar    schedule 04.12.2012    source источник
comment
этот ответ: stackoverflow.com/a/12307775/180100 может помочь.   -  person    schedule 04.12.2012
comment
@RC. спасибо, я это видел. А изображения?   -  person Roman Pekar    schedule 04.12.2012

Ответы (1)


arrow_upward
1
arrow_downward

Поскольку 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;
    }

Это должно заставить вас начать.

person bottens    schedule 16.05.2013