Полная функция поиска на html-странице

В последнее время я работаю над фреймворком, который был изменен многими людьми. У меня кружится голова, когда я каждый день смотрю на код. Однако я чувствую, что добился большого прогресса: я сделал бэкэнд и настраиваемый интерфейс для просмотра. разные диапазоны данных двух библиотек. Это довольно хорошо, и в тот же день я взял его, чтобы поделиться. Сегодня я расскажу о функции, над которой я работал в последние несколько дней, а именно о функции поиска. html-страницы.

Эта функция в основном используется для ввода символов в поле поиска, а затем нажатия кнопок «Предыдущая» и «Далее», чтобы автоматически пометить совпадающие символы в области запроса специальным стилем. После этого вы можете продолжать нажимать кнопки «Предыдущая» и «Далее», чтобы. просмотрите по порядку символы и используйте другой шаблон, чтобы отличить совпавший в данный момент символ от других совпадающих символов.

Интерфейсный дисплей, вероятно, выглядит так:

HTML такой:

 <div class=container style=z-index: 999 id=searchDiv> <div class=keyword-search> Найти: <input id=key type=text style=width: 200px; Placeholder=keyword/> <a href= javascript :void(0); class=prev onclick='wordSearch(1)'><i class=c-icon></i></a> <a href=javascript:void(0); class=next onclick='wordSearch()'><i class=c-icon></i></a> </div> </div>

код сценария:

 <script>//Функция поиска var oldKey0 = ; var index0 = -1; var oldCount0 = 0; var currentLength = 0; var function wordSearch(flg) { var key = $(#key).val() ; //Получаем значение ключа if (!key) { return; //Выходим, если ключ пуст} getArray(); focusNext(flg); } function focusNext(flg) { if (newflag == 0) {//Если есть новый поиск, индекс очищается index0 = 0 } if (!flg) { if (oldCount0 != 0) {//Если поиск ещё есть if (index0); < oldCount0) {// Если вы не закончили идти налево, идите налево focusMove(index0); index0++; } else if (index0 == oldCount0) {// Вы закончили идти index0 = 0; focusMove(index0); ); index0++; } else { index0 = 0;//Undetermined focusMove(index0); index0++; } } } else { if (oldCount0 != 0) {//Если еще есть поиск if (index0 <= oldCount0 && index0 > 0) {//Если вы не закончили идти налево, перейдите налево index0--; focusMove(index0 } else if (index0 == 0) {//Вы закончили идти index0 = oldCount0-- focusMove(index0); } } } } function getArray() { newflag = 1; $(.contrast .result).removeClass(res); var key = $(#key).val(); /Получить значение ключа if (!key) { oldKey0 = ; return; //Выход, если ключ пуст} if (oldKey0 != key || $(.current).length != currentLength) { //Сбросить index0 = 0; var index = 0; $(.contrast .result).each(function () { $(this).replaceWith($(this).html()); } ) pos0 = новый массив(); если ($(.contrast-wrap).hasClass(current)) { currentLength = $(.current).length; .contrast).each(function () { $(this).html($(this).html().replace(new RegExp(key, gm), <span id='result + (index++) + ' class= 'result'> + key + </span>)); // Заменить }); else { $(.contrast-wrap).addClass('currentLength'); $(.current).length; $(.contrast).each(function () { $(this).html($(this).html().replace(new RegExp(key, gm), <span id= 'result + (index++) + ' class='result'> + key + </span>)); // Заменить }); //$(#key).val(key); oldKey0 = key; //$(.contrast .result).each(function () { // $(this).parents('.contrast-wrap').addClass('current'); // pos0.push($(this) .offset().top); // pos0.push($(.contrast .result:eq(2)).offset().top - $(.contrast .result:eq(2)).parents(.contrast).offset().top); oldCount0 = $(.contrast .result).length; newflag = 0; } } function focusMove(index0) { $(.contrast). .result:eq( + index0 + )).parents('.contrast-wrap').addClass('current'); $(.contrast .result:eq( + index0 + )).addClass(res); var top = $(.contrast .result:eq( + index0 + )).offset().top + $(.contrast .result :eq( + index0 + )).parents(.contrast).scrollTop(); var intop = top - $(.contrast). .result:eq( + index0 + )).parents(.contrast).offset().top; $(.contrast .result:eq( + index0 + )).parents(.contrast).animate({ ScrollTop: intop }, 200); если ($(.contrast .result:eq( + index0 + )).parents(.contrast).scrollTop() == 0) { $(html, body).animate({ ScrollTop: top - 200 }, 200 } else { $(html, body).animate({); ScrollTop: $(.contrast .result:eq( + index0 + )).parents(.contrast).offset().top - 200 }, 200); } } $('#key').change(function () { if ($('#key').val() == ) { index0 = 0; $(.contrast .result). каждый(функция () { $(this).replaceWith($(this).html()); }); oldKey0 = } });

Сначала очистите результаты последнего запроса, а затем используйте регулярные выражения, чтобы добавить специальный стиль ко всем совпадающим символам в области на основе значения ключа. Например, к методу добавляется тег span с именем класса result. используйте переменную odKey0 для записи значения ключа (Сравните сначала при следующем вводе. Если они совпадают, это означает, что вам нужно просмотреть следующий или предыдущий контент, поэтому вам не нужно использовать сопоставление регулярных выражений при вводе oldCount0 записывает общее количество запросов). , а newflag устанавливается в 0 (если это не первый раз). Запрос newflag равен 1).

Затем введите метод getNext. flg указывает, нажал ли пользователь предыдущую или следующую кнопку. Используйте index0, чтобы записать, какой соответствующий символ просматривается в данный момент. Сравните его с oldCount0, чтобы определить, следует ли увеличивать или уменьшать или устанавливать значение 0 (если оно больше). oldCount0 или меньше 0, вам придется начать заново).

Метод focusMove — это операция, которая позиционирует страницу по отношению к текущему элементу.

Селектор eq(): Селектор выбирает элементы с указанным значением индекса. Например: $(.contrast .result:eq(1)) выбирает второй элемент с именем result в элементе, имя класса которого контрастно.

Метод родителей(): все родительские элементы элемента. $(p).parents('.contrast-wrap') , все элементы с именем контраст-обтекание элемента p.

Метод replace(): заменяет выбранный элемент указанным содержимым HTML. Обратите внимание, что элементы выбранного элемента также заменяются.

Метод offset(): возвращает или устанавливает смещение (позицию) соответствующего элемента относительно документа.

Метод ScrollTop(): возвращает или устанавливает вертикальное положение полосы прокрутки соответствующего элемента.

Вышеупомянутая функция поиска на HTML-странице представлена ​​вам редактором. Надеюсь, она будет вам полезна. Если у вас есть какие-либо вопросы, оставьте мне сообщение, и редактор ответит вам вовремя. Я также хотел бы поблагодарить всех за поддержку сайта боевых искусств VeVb!