Нужен был поиск на страничке, точнее в тексте, не серверный, а обычный. То есть — загрузил страничку где много текста, читаешь, и при надобности ищешь. Порылся в интернете и, к сожалению, готово варианта (с переходом между словами и прокруткой странички) не нашел, хотя в реализации нету ничего сложного — или плохо искал, или никому не надо было.
Вот как раз заканчиваю — решил поделиться первым вариантом.
Само собой используется библиотека jQuery.
За основу я взял статейку jQuery – подсветка слов в тексте или HTML отсюда (их пример). Как подключить к страничке скрипт там описано.
буду использовать ниже «слово» = «словосочетание» = «словосочетание букв и\или символов».
Теперь начнем расширять функционал:
1) делаем подсветку конкретного слова
в файл jquery.highlight.js добавляем
2) в стиль прописываем отображение выделяемого слова и меняем стиль подсветки для себя
3)Создаем кнопки и поле ввода
4)приписываем кнопкам действия
копируем код:
(ниже опишу для чего эта функция)
5)
ну вообще делается очень легко с помощью простого плагина jqueryscrollto, который берем отсюда, и ищем по классу
Но мне пришлось использовать этот набор плагинов (jqwidgets), так как был нужен собственный скрол для странички а не браузерный, поэтому я воспользовался их API:
scrollTo Method
Scroll to specific position.
Code examples
Invoke the scrollTo method.
Demo
Вот походу и все.
Прошу прощения за неоптимизированный код — вот только что закончил и решил поделится, это только начальная версия
Вот как раз заканчиваю — решил поделиться первым вариантом.
Само собой используется библиотека jQuery.
За основу я взял статейку jQuery – подсветка слов в тексте или HTML отсюда (их пример). Как подключить к страничке скрипт там описано.
буду использовать ниже «слово» = «словосочетание» = «словосочетание букв и\или символов».
Теперь начнем расширять функционал:
кнопки поиска, выделение следующего слова и предыдущего, и скролл странички к выделенному слову
1) делаем подсветку конкретного слова
в файл jquery.highlight.js добавляем
jQuery.fn.selectHighlight = function(number) { return this.find("span.highlight:eq("+number+")").addClass('selectHighlight').end(); };
2) в стиль прописываем отображение выделяемого слова и меняем стиль подсветки для себя
.highlight { background-color: gray; color: white } .selectHighlight { background-color: rgb(35, 140, 0) }
3)Создаем кнопки и поле ввода
<div id="search_block"> <label> Search: <input id="search_text" type="text" value=""/> </label> <input id="search_button" type="button" value="Search"/> <input id="prev_search" type="button" value="<"/> <input id="next_search" type="button" value=">"/> <input id="clear_button" type="button" value="Clear"/> </div>
4)приписываем кнопкам действия
копируем код:
(ниже опишу для чего эта функция)
function scroll_to_word(){ pos = $('#text .selectHighlight').position() $('#content').jqxPanel('scrollTo', 0, pos.top - 5); }
var search_number = 0; //индекс конкретного сочетания из найденных var search_count = 0; //количество найденных сочетаний //search - поиск слова по нажатию на кнопку "search_button" $('#search_button').click(function() { $('#text').removeHighlight(); txt = $('#search_text').val(); if (txt == '') return; $('#text').highlight(txt); search_count = $('#text span.highlight').size() - 1; search_number = 0; $('#text').selectHighlight(search_number); //выделяем первое слово из найденных scroll_to_word(); //скролим страничку к выделяемому слову }); //clear - очистка выделения по нажатию на кнопку "clear_button" $('#clear_button').click(function() { $('#text').removeHighlight(); }); //prev_search - выделяем предыдущие слово из найденных и скролим страничку к нему $('#prev_search').click(function() { if (search_number == 0) return; $('#text .selectHighlight').removeClass('selectHighlight'); search_number--; $('#text').selectHighlight(search_number); scroll_to_word(); }); //next_search - выделяем следующее слово из найденных и скролим страничку к нему $('#next_search').click(function() { if (search_number == search_count) return; $('#text .selectHighlight').removeClass('selectHighlight'); search_number++; $('#text').selectHighlight(search_number); scroll_to_word(); });
5)
function scroll_to_word(){...} — функция скрола (перемотки) странички к нужному нам словуну вообще делается очень легко с помощью простого плагина jqueryscrollto, который берем отсюда, и ищем по классу
.highlight и номером eq('+search_number +') (search_number — смотрим в список глобальных переменных скрипта).jQuery('#content').scrollTo('.highlight('+search_number +')');
Но мне пришлось использовать этот набор плагинов (jqwidgets), так как был нужен собственный скрол для странички а не браузерный, поэтому я воспользовался их API:
scrollTo Method
Scroll to specific position.
Code examples
Invoke the scrollTo method.
$('#jqxPanel').jqxPanel('scrollTo', 10, 20);
function scroll_to_word(){ pos = $('#text .selectHighlight').position() $('#content').jqxPanel('scrollTo', 0, pos.top - 5); // 5 - отступ в пикселях при прокрутке от верхнего края к выделяемому слову - для эстетического вида }
Demo
Вот походу и все.
Прошу прощения за неоптимизированный код — вот только что закончил и решил поделится, это только начальная версия
