Новичок. Ищу скрипты приспосабливаю под свои нужды. Помогите с простой задачей в оформлении html одной вебстранички и адаптировании скрипта, использующего jquery. Не пугайтесь что написал текста много, задача для профи - простая, для меня огромная помощь. Спасибо!
Задача: создать мгновенный поиск и подсветку найденного для больших веб-страниц, расположенных на локальном компьютере, замена CTRL+F:
1. Скрипты только JavaScript, текст скриптов вынести в отдельный файл js, работать скрипты должны в любом браузере (желательно включая браузеры на/для Android)
2. Страница должна иметь 2 блока: блок один, узкий с 2мя контролами (см. ниже), висящий все время вверху в топ страницы, поверх, не изменяющий позиции при скроллинге, блок два - с основным текстом страницы, где будет производится поиск
3. Дано: Основной текст страницы сверстан одинаковыми divами <div class="search_item">текст</div>
4. Блок 1 содержит 2 контрола: текстовое поле #q и checkbox #q1, используемый для переключения режимов поиска True = режим 1, False = режим 2
5. Текст введенный в блок 1 должен подсвечиваться на вебстранице, не чувствительно к регистру, не зависит вначале/в середине слова, все вхождения
6. Режим 1 - если текст найден - перейти (scroll страницы) к первому вхождению, если текст не найден/ничего не введено - перейти (скролл) в начало страницы
7. Режим 2 - если текст найден в элементе search_item - показать этот div-элемент, не найден - скрыть этот div-элемент, если ничего не введено - показать всю страницу
8. Скрипт(ы) мгновенного поиска запускаются вводом символов в текстовом поле 1 (н-р отслеживаем нажатия, keyup), а также снятием|установкой checkbox 1, т.е. последнее также должно подсвечивать/переходить/скрывать-показывать текущий текст в текстовое поле #q
Все запчасти для будущей веб-страницы нашел в инете, помогите это подчистить, собрать в кучу
|
Код:
|
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="search_and_highlight.js" type="text/javascript"></script>
<script type="text/javascript">$().ready(function(){$('#q').focus()})</script>
<style type="text/css">
.highlight {background-color:yellow;}
</style>
</head>
<body>
<div id="top">
<form action="javascript:void(0);">
<h3> <input id="q" name="q" autocomplete="off" type="text"> </h3>
<input name="q1" type="checkbox" />
</form><p>
</div>
<div class="search_item">текст</div>
<div class="search_item">текст</div>
<div class="search_item">текст</div>
<div class="search_item">текст</div>
</body>
</html> |
Собственно скрипт
|
Код:
|
//эта часть работает как надо, находится в search_and_highlight.js
$().ready(function(){
$('#q').keyup(function(){
$('.search_item').each(function(){
var re = new RegExp($('#q').val(), 'i')
if($(this).text().match(re)){
$(this).show();
}else{
$(this).hide();
};
});
});
});
//эта тоже работает, только надо корректно вынести из вебстраницы в search_and_highlight.js чтобы это тоже срабатывало на события keyup-keyup change в #q
<script type="text/javascript">
$(function() {
$('#q').bind('keyup change', function(ev) {
var searchTerm = $(this).val();
$('body').removeHighlight();
if ( searchTerm ) {
$('body').highlight( searchTerm );
}
});
});
</script>
//эта почему то не работает в браузерах на android
function scrollToFirstFoundTerm()
{
var firstFoundTerm = $('.highlight:first');
if (firstFoundTerm.length > 0)
$('html').scrollTop(firstFoundTerm.offset().top);
}
//ниже - части скрипта по подсветке текста, найдено в инете работает как надо
jQuery.fn.highlight = function(pat) {
function innerHighlight(node, pat) {
var skip = 0;
if (node.nodeType == 3) {
var pos = node.data.toUpperCase().indexOf(pat);
if (pos >= 0) {
var spannode = document.createElement('span');
spannode.className = 'highlight';
var middlebit = node.splitText(pos);
var endbit = middlebit.splitText(pat.length);
var middleclone = middlebit.cloneNode(true);
spannode.appendChild(middleclone);
middlebit.parentNode.replaceChild(spannode, middlebit);
skip = 1;
}
}
else if (node.nodeType == 1 && node.childNodes && !/(script|style)/i.test(node.tagName)) {
for (var i = 0; i < node.childNodes.length; ++i) {
i += innerHighlight(node.childNodes[i], pat);
}
}
return skip;
}
return this.each(function() {
innerHighlight(this, pat.toUpperCase());
});
};
jQuery.fn.removeHighlight = function() {
function newNormalize(node) {
for (var i = 0, children = node.childNodes, nodeCount = children.length; i < nodeCount; i++) {
var child = children[i];
if (child.nodeType == 1) {
newNormalize(child);
continue;
}
if (child.nodeType != 3) { continue; }
var next = child.nextSibling;
if (next == null || next.nodeType != 3) { continue; }
var combined_text = child.nodeValue + next.nodeValue;
new_node = node.ownerDocument.createTextNode(combined_text);
node.insertBefore(new_node, child);
node.removeChild(child);
node.removeChild(next);
i--;
nodeCount--;
}
}
return this.find("span.highlight").each(function() {
var thisParent = this.parentNode;
thisParent.replaceChild(this.firstChild, this);
newNormalize(thisParent);
}).end();
}; |
