поиск текст - подсветка - переход к найденному - JavaScript, Ajax

rdfhnbhf · 05.07.2012, 13:00

Новичок. Ищу скрипты приспосабливаю под свои нужды. Помогите с простой задачей в оформлении 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 
<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);
}

rdfhnbhf · 05.07.2012, 13:02

//ниже - части скрипта по подсветке текста, найдено в инете работает как надо
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(s pannode, 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(c ombined_text);
node.insertBefore(new_node, child);
node.removeChild(child);
node.removeChild(next);
i--;
nodeCount--;
}
}

return this.find("span.highlight").each(fu nction() {
var thisParent = this.parentNode;
thisParent.replaceChild(this.firstC hild, this);
newNormalize(thisParent);
}).end();
};

05.07.2012, 13:00	#1
rdfhnbhf Регистрация: 05.07.2012 Сообщений: 6	поиск текст - подсветка - переход к найденному Новичок. Ищу скрипты приспосабливаю под свои нужды. Помогите с простой задачей в оформлении 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 <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); }

05.07.2012, 13:02	#2
rdfhnbhf Регистрация: 05.07.2012 Сообщений: 6	Часть2 предыдущего сообщения //ниже - части скрипта по подсветке текста, найдено в инете работает как надо 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(s pannode, 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(c ombined_text); node.insertBefore(new_node, child); node.removeChild(child); node.removeChild(next); i--; nodeCount--; } } return this.find("span.highlight").each(fu nction() { var thisParent = this.parentNode; thisParent.replaceChild(this.firstC hild, this); newNormalize(thisParent); }).end(); };

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
TwebBrowser - поиск и подсветка текста	kta87	Общие вопросы Delphi	4	14.01.2014 15:06
Delphi:поиск ссылки и переход по ней	-=ATT=-	Помощь студентам	0	08.11.2011 20:18
переход на заданный сайт или как вставить в заданное место заданный текст	Biker89	Общие вопросы Delphi	23	29.05.2011 01:59
Текст. ред. Поиск и замена	Славный	Общие вопросы Delphi	4	25.06.2008 20:09
Подсветка если текст в	[RR]Reaction	Общие вопросы Delphi	12	09.04.2008 17:47