Как реализовать подобный поиск текста?

Всем привет!
На сайте имеется некий блок, в котором есть item'ы с информацией (заголовок и текст), на данной же странице для удобства есть поиск (т.е. Ajax'ом отправлять запросы никуда не надо, т.к. вся информация уже есть на странице).
При вводе слов в поисковое поле те item'мы в которых есть совпадения показываются в вот таком виде:
5a54f239250dc439605616.png
вот тут можно глянуть воочию как это работает (в шапке справа знак вопроса, а затем значок поиска).
Просто подсветку найденного текста на сайте не сделать, т.к. item'ы реализованы в виде аккордеона, поэтому нужно во всплывающей плашке, но это без проблем - сложности в том, что не пойму, как найденную часть текста показать в одну строку (точнее найденную часть показать видимой, а остальное по бокам отсечь, т.е. вот так: ...тут есть найденные фразы из очень длинного текста...).

Подскажите, пожалуйста, может кто уже сталкивался с подобным. Буду очень благодарен! Спасибо!
  • Вопрос задан
  • 57 просмотров
Пригласить эксперта
Ответы на вопрос 1
dark_tke
@dark_tke
Помогли? Отметь решением!
C чего вы взяли что там нет ajax? Я прошел по вашей ссылке, просмотрел решение что здесь есть. Стандартно через ajax. Перейдите на сайт, включите отображение XHR запросов и сами все увидите.

В остальном же кастомные элементы на основе input и div

как найденную часть текста показать в одну строку (точнее найденную часть показать видимой, а остальное по бокам отсечь, т.е. вот так

htmlbook.ru/css/text-overflow, плюс на сайте который вы предложили в качестве примера json данные такие:
text:"...жимое страницы (контент). Также автоматически отслеживаются <span class="found">HT</span>TP коды страниц.↵↵Чтобы перейти на страницу Радар, выполните следующие действия:↵↵↵    Войдите в аккаунт Топвизор.↵    Создайте проект или выберите существующий.↵    Нажмите  для перехода на страницу Радар.↵↵↵↵↵Настройка отслеживания↵↵Для настройки сканирования и отслеживания контента необходимо выбрать спо...",
title:"Радар (отслеживание изменений) — Справка Топвизор",
url:"/support/audit/watcher/"}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы