X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Мгновенный поиск, подсветка, переход к найденному
rdfhnbhf
rdfhnbhf
Topic Starter сообщение 5.7.2012, 13:06; Ответить: rdfhnbhf
Сообщение #1


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


Собственно скрипт
[JS]
//эта часть работает как надо, находится в 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();
}; [/JS]
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
cyber_ua
cyber_ua
сообщение 5.7.2012, 14:46; Ответить: cyber_ua
Сообщение #2


(rdfhnbhf @ 5.7.2012, 16:06) *
Новичок. Ищу скрипты приспосабливаю под свои нужды. Помогите с простой задачей в оформлении html одной вебстранички и адаптировании скрипта, использующего jquery. Не пугайтесь что написал текста много, задача для профи - простая, для меня огромная помощь. Спасибо!

не думаю что найдется много желающих делать это бесплатно, но может вам и повезет =)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
rdfhnbhf
rdfhnbhf
Topic Starter сообщение 5.7.2012, 15:20; Ответить: rdfhnbhf
Сообщение #3


(cyber_ua @ 5.7.2012, 17:46) *
не думаю что найдется много желающих делать это бесплатно, но может вам и повезет =)

Если вчитаться - речь идет о верстке 1 html веб-страницы + правильно соединить куски готового кода (80%) + дописать код - 20%. Если Ваша цена будет разумной напишите на ekoua@yandex.ru - отвечу

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Smmsearch.net - поиск самой дешевой накрутки в социальных сетях.
0 Professor7717 3294 13.8.2021, 19:53
автор: Professor7717
Открытая тема (нет новых ответов) Поиск кодера в команду. PHP, Pyton. На постоянку.
7 getsend_mw 2857 3.2.2021, 21:15
автор: getsend_mw
Открытая тема (нет новых ответов) Поиск копирайтера на игровую тематику
Поиск копирайтера на игровую тематику
4 a1ex777 1649 2.10.2020, 16:01
автор: AndreyBozhenko
Открытая тема (нет новых ответов) SmmBox - поиск, аналитика и отложенная публикация в соцсетях. Официально!
23 smmbox 11932 13.5.2020, 11:12
автор: smmbox
Открытая тема (нет новых ответов) Поиск, сбор информации, парсинг (недорого)
Предлагаю услуги по поиску, сбору информации, парсингу и т.д.
0 Kabardin 1350 11.3.2020, 14:59
автор: Kabardin


 



RSS Текстовая версия Сейчас: 19.4.2024, 6:59
Дизайн