Нещодавно робив пошук по сторінці засобами jQuery. Поки розбирався, як краще зробити, щоб оптимально підходило для навігації по контенту на сторінці, вийшло 2 варіанти пошуку. В результаті для моїх потреб краще підійшов другий варіант, але розповім сьогодні про обох.
У першому варіанті пошук буде вестися за всіма словами (символам) в заданій частині документа. У другому варіанті список слів задається спочатку, у міру введення символів в рядок пошуку будуть пропонуватися містять їх слова. Свого роду пошукові підказки.
Підключаємо бібліотеку jQuery, плагін higlighting відповідає за пошук і виділення в тексті збіглися значень і скрипт який буде обробляти пошукові запити. Скрипт запускається при кліці по елементу з id = "submit".
змінна term - отримує значення пошукового запиту;
змінна n - відповідає за кількість запропонованих варіантів;
функція removeHighlight () - видаляє попередні результати пошуку;
функція hide () - приховує блок з інформацією про результати пошуку;
функція empty () - видаляє вміст блоку з результатами пошуку;
функція fadeIn () - робить видимим блок з інформацією про результати пошуку;
функція append () - додає контент в блок з інформацією про результати пошуку;
функція highlight () - обрамляє все збіглися з пошуковим запитом слова в тег span з class = "highlight»;
властивість length - поверне число запропонованих варіантів на сторінці.
Між тегами body потрібно вставити форму для введення пошукових запитів, контейнер для виведення інформації про результати пошуку і блок з класом main всередині якого буде проводиться пошук.
Підключаємо файл з стилями, віджет jQuery UI: Autocomplete. бібліотеку jQuery, плагін higlighting відповідає за пошук і виділення в тексті збіглися значень і скрипт який буде обробляти пошукові запити.
змінна term - відповідає за формування посилання на закладку, починається символом #, потім йде назва закладки (значення пошукового запиту);
змінна tags - отримує значення пошукового запиту;
функція toLowerCase () - призводить рядок до нижнього регістру;
Пошук по сторінці за допомогою jQuery: Приклад 1 і Приклад 2.