Нужен был поиск на страничке, точнее в тексте, не серверный, а обычный. То есть — загрузил страничку где много текста, читаешь, и при надобности ищешь. Порылся в интернете и, к сожалению, готово варианта (с переходом между словами и прокруткой странички) не нашел, хотя в реализации нету ничего сложного — или плохо искал, или никому не надо было.
Вот как раз заканчиваю — решил поделиться первым вариантом.
Само собой используется библиотека 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
Вот походу и все.
Прошу прощения за неоптимизированный код — вот только что закончил и решил поделится, это только начальная версия