Подтвердить что ты не робот

Как настроить макет/функцию Bootstrap typeahead только для текста?

Я работаю над функциями поиска для своего сайта, и я использую Bootstrap typeahead, чтобы показать результаты. Все идет нормально. Но я хочу расширить функцию, чтобы я мог добавить изображение и другой элемент, скажем, описание и т.д. Согласно этому сообщению, это возможно: custom typeahead.

В основном мне нужно что-то подобное в каждом элементе результата:

<div class="resultContainer">
  <div class="resultImage"><img /></div>
  <div class="resultDesc"></div>
  <div class="resultLabel"></div>
</div>

Теперь это:

<li><a href="#"></a></li>

И это даже не работает с более длинным текстом, чем ширина typeahead. Таким образом, текст не переходит к следующей строке и, следовательно, не подходит для <li>. Как я могу использовать пользовательский макет, который я хочу? (btw У меня есть массив массивов результатов. Каждый подматрица содержит img, desc и т.д.). Это то, что я имею прямо сейчас:  enter image description here

Спасибо заранее.

4b9b3361

ОТВЕТЫ

Ответ 1

Используйте метод highlighter:

$('.typeahead').typeahead({
    highlighter: function(item){
        return "<div>.......</div>";
    }
});

Метод, используемый для выделения результатов автозаполнения. Принимает один аргумент и имеет область экземпляра typeahead. Должен return html.

Ответ 2

Ответ mgadda аккуратно решает вопрос о том, как дополнить элементы рендеринга пользовательскими данными. К сожалению, эти метаданные недоступны после выбора элемента, потому что метод bootstrap select() вызывает ваш updater() со значением, взятым из DOM, а не с загруженной строкой:

var val = this.$menu.find('.active').attr('data-value');

Одним из способов решения этой проблемы является установка метаданных, которые вам нужны, для элементов DOM в highlighter(), а затем их поиск в вашем updater(). Поскольку нам нужно было только целое число, мы устанавливаем идентификатор для самого тега изображения, а в модуле обновления ищем его на основе тега изображения, который все еще видим:

$('.your_textboxes').typeahead({
  highlighter: function(item) {
    return('<img src="' + item.friend.img + '" id="klid_' + item.friend.id + '" />' + item);
  },
  updater: function(val) {
    var klid = $('ul.typeahead li.active:visible a img');
    if (klid && klid.length) {
      klid = klid[0].id.substr(5);
      // do stuff with metadata...
    }
    return(val);
}

Нужно больше метаданных? Оберните свой маркер в диапазон или добавьте некоторые скрытые поля формы.

Это кажется грязным, хотя. Если у кого-нибудь есть более чистое решение, я бы хотел его увидеть.

Ответ 3

Typeahead ожидает, что все, что передается в обратный вызов процесса из обратного вызова источника, будет строкой. К сожалению, это означает, что ваш обратный вызов с подсветкой несколько ограничен в виде HTML, который он может сгенерировать, поскольку вы можете так сильно изменить строку.

Однако вы можете определить свой исходный метод таким образом, чтобы он возвращал обычный массив строковых объектов, каждый из которых имеет дополнительное свойство данных, которое содержит все данные, необходимые для генерации HTML в маркере.

$('.typeahead').typeahead
  source: (query, processCallback)->
    $.get '/users', q: query, (data)->
      processCallback data.map (user)->
        item = new String("#{user.first_name} #{user.last_name}")
        item.data = user
        item

В этой форме item будет передаваться вокруг внутренних элементов typeahead в виде строки, и когда он наконец достигнет вашего пользовательского маркера, вы можете использовать свойство data для создания более сложного html:

$('.typeahead').typeahead
  highlighter: (item)->
    "<img src=\"#{item.data.avatar_url}\" /> #{item}"