Блог

Главная - Вопросы по программированию - Результат окна поиска с помощью bootstrap

Результат окна поиска с помощью bootstrap

#html #css #twitter-bootstrap #bootstrap-4

#HTML #css #twitter-bootstrap #bootstrap-4

Вопрос:

Я настраиваю поиск с помощью bootstrap, и я хотел бы отобразить результаты в виде наложения вокруг поля поиска, однако я не уверен, как это сделать.

Я использую Bootstrap 4, поэтому я даже не знаю, с чего начать. Я хотел попробовать что-то сделать только с HTML и CSS.

Немного похоже на поиск самой документации bootstrap.

Итак, я хотел бы отобразить наложение вокруг окна поиска. Я не знаю, как я мог бы сделать так, чтобы этот результат поиска отображался поверх всего содержимого, но чуть ниже окна поиска. А также то, что он будет расти в зависимости от размера количества результатов. введите описание изображения здесь

введите описание изображения здесь

Комментарии:

1. Вы пробовали select2.js ( select2.org )? У них есть тема Bootstrap 4, которую вы можете использовать ( github.com/ttskch/select2-bootstrap4-theme ).

2. Возможно, стоит проверить плагин Twitter typeahead . Вы можете оформить наложение любым удобным для вас способом … не требует начальной загрузки

3. Большое вам спасибо за советы. Поиск javascript я уже сделал (я использую angular). За исключением того, что, поскольку я не очень разбираюсь в CSS, я не могу создать эффект этого окна и отобразить его поверх других компонентов.

Ответ №1:

Попробуйте автозаполнение пользовательского интерфейса jQuery. Реализация проста.

     var yourSuggestions = [
        "Suggestion 1",
        "Suggestion 2",
        "Another suggestion"
        //so on...
      ];

    $("#searchWord").autocomplete({
       source: yourSuggestions
    });

Вот рабочий пример. Поиграйте с этим, и вы увидите, как все работает. В этом примере использовались bootstrap, jQuery и jQuery UI.