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

Question

[Дмитрий Локшин]

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

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

Подскажите, пожалуйста, может кто уже сталкивался с подобным. Буду очень благодарен! Спасибо!

Answer 1

[Константин Толмачев]

C чего вы взяли что там нет ajax? Я прошел по вашей ссылке, просмотрел решение что здесь есть. Стандартно через ajax. Перейдите на сайт, включите отображение XHR запросов и сами все увидите.

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

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

htmlbook.ru/css/text-overflow, плюс на сайте который вы предложили в качестве примера json данные такие:

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

Comments

[Дмитрий Локшин]

Я написал что нет Ajax на моём сайте, а на сайте, что указан в примере, я видел что есть.

[Константин Толмачев]

Дмитрий Локшин, дополнил ответ. Принцип тот же. все обрезку до нужных форматов там выполняет сервер, на клиент уже все данные в готовом виде приходят.