Простой живой поиск

DOM — Поиск элементов

В этой главе рассказывается, как найти и получить доступ к HTML элементам на HTML странице.

Поиск HTML элементов

Часто в JavaScript необходимо проводить определенные манипуляции с HTML элементами.

Чтобы это сделать, сначала нужно найти требуемый элемент. Найти HTML элемент можно несколькими способами:

• по идентификатору id
• по имени тега
• по имени класса
• по селекторам CSS
• по наборам объектов HTML

Поиск HTML элемента по идентификатору

Самый простой способ найти HTML элемент в DOM — это использовать его идентификатор id.

В следующем примере мы ищем элемент с id=»intro»:

 var myElement = document.getElementById("intro"); 

Если элемент будет найден, то он будет возвращен в виде объекта (в переменную myElement).

Если элемент не будет найден, то в переменная myElement будет содержать значение null.

Поиск HTML элемента по имени тега

В следующем примере мы ищем все элементы

:

 var x = document.getElementsByTagName("p"); 

В следующем примере сначала происходит поиск элемента с id=»main», а затем всех элементов

внутри «main»:

 var x = document.getElementById("main"); var y = x.getElementsByTagName("p"); 

Поиск HTML элемента по имени класса

Если нужно найти все HTML элементы с одним и тем же именем класса, то используют метод getElementsByClassName().

В следующем примере возвращается список всех элементов с атрибутом class=»intro»:

 var x = document.getElementsByClassName("intro"); 

Внимание! Поиск элементов по имени класса не работает в Internet Explorer 8 и более ранних версиях.

Поиск HTML элемента по CSS селекторам

Если нужно найти все HTML элементы, подходящие по заданному CSS селектору (id, имена классов, типы, атрибуты, значения атрибутов и т.п.), используется метод querySelectorAll().

В следующем примере возвращается список всех элементов

с атрибутом :

 var x = document.querySelectorAll("p.intro"); 

Внимание! Метод querySelectorAll() не работает в Internet Explorer 8 и более ранних версиях.

Поиск HTML элемента по наборам HTML объектов

В следующем примере производится поиск элемента формы с атрибутом в наборе объектов forms, и отображаются все значения элементов:

 var x = document.forms["frm1"]; var text = ""; var i; for (i = 0; i < x.length; i++) < text += x.elements[i].value + "
"; > document.getElementById("demo").innerHTML = text; 

Также доступны следующие HTML объекты (и наборы объектов):

• document.anchors
• document.body
• document.documentElement
• document.embeds
• document.forms
• document.head
• document.images
• document.links
• document.scripts
• document.title

Источник

Пишем свой простой вариант «живого поиска».

Сегодня я напишу статью, о том как сделать простую версию так называемого «живого поиска». Для тех кто не в курсе, живой поиск — это когда при вводе искомого текста, появляется подсказка, с возможными вариантами. Примером тому служит Яндекс и Google.

По сути «живой поиск» это обычный AJAX скрипт, который обращается к базе данных, производит в ней поиск, и возвращает ответ скрипту. Для работы поиска я буду использовать Jquery.

Итак, создадим простую форму поиска:

     .search_area < width: 350px; margin: 0px; position: relative; >#search_box < width:200px; padding:2px; margin:1px; border:1px solid #000; >#search_advice_wrapper < display:none; width: 350px; background-color: rgb(80, 80, 114); color: rgb(255, 227, 189); -moz-opacity: 0.95; opacity: 0.95; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=95); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=95); filter:alpha(opacity=95); z-index:999; position: absolute; top: 24px; left: 0px; >#search_advice_wrapper .advice_variant < cursor: pointer; padding: 5px; text-align: left; >#search_advice_wrapper .advice_variant:hover < color:#FEFFBD; background-color:#818187; >#search_advice_wrapper .active   Обратите внимание на autocomplete="off" у input'а, это для того чтобы отключить подсказки браузера, которые он показывает при повторном наборе текста в форме.

Теперь займемся созданием javascript скрипта.

Я постарался описать этот скрипт по максимуму в комментариях. По сути скрипт делется на несколько частей:

1. Считываем ввод с клавиатуры, получаем данные из базы данных и выводим их
2. Делаем скрытие слоя с подсказками, при нажатии на Escape и Enter
3. Делаем переход по слою с подсказками, через нажатие стрелок клавиатуры ( вверх и вниз)
4. Скрытие слоя с подсказками при клике на поле сайта и открытие его при клике на input
5. При клике на подсказку мы вписываем слово в input поиска и прячем форму подсказки.

А теперь давайте посмотрим содержимое файла /ajax/ajax.php, к которому мы подключаемся за теми самыми подсказками.

if(!empty($_GET['query']))< $query = (string)$_GET['query']; $array = array(); $request = $db->query("SELECT `description`, `name` FROM `prefix_name` WHERE `description` LIKE '%". $db->real_escape_string($query) . "%' OR `name` LIKE '%". $db->real_escape_string($query) . "%' LIMIT 0, 10"); while($data =$db->fetch_assoc($request)) < $array[] = $data['name']; >echo "['".implode("','", $array)."']"; > exit();

Источник

Поиск по странице с помощью jQuery

Многие посетители сайтов не знают о поиске по странице по нажатию Ctrl+F и ищут необходимый фрагмент глазами, просто пролистывая текст. Этот способ становится проблематичным, если на странице текста больше, чем три-четыре экрана. Для таких посетителей я решил реализовать поиск по странице с использованием jQuery.
Пример подобного поиска есть на сайте Конституции РФ, но там он работает как-то странно.

Предупреждение

Я не профессиональный программист, просьба не пинать за кривой код и возможное изобретение велосипеда.

HTML-форма

Первым делом разместим на странице HTML-код формы поиска. Форма включает два элемента — поле для ввода текста и DIV для вывода результатов поиска.

CSS

Настройка поиска

 var minlen = 3; // минимальная длина слова var paddingtop = 30; // отступ сверху при прокрутке var scrollspeed = 200; // время прокрутки var keyint = 1000; // интервал между нажатиями клавиш

Подсветка фрагментов

Базовая функциональность — подсветка фрагментов в тексте. Делается это с помощью регулярных выражений.

function dosearch() < term = jQuery('#spterm').val(); jQuery('span.highlight').each(function()< //удаляем старую подсветку jQuery(this).after(jQuery(this).html()).remove(); >); var t = ''; jQuery('div.entry-content').each(function()< // в селекторе задаем область поиска jQuery(this).html(jQuery(this).html().replace(new RegExp(term, 'ig'), '$&')); // выделяем найденные фрагменты n = jQuery('span.highlight').length; // количество найденных фрагментов console.log('n = '+n); if (n==0) jQuery('#spresult').html('Ничего не найдено'); else jQuery('#spresult').html('Результатов: '+n); >); > jQuery('#spterm').keyup(function()< if (jQuery('#spterm').val()!=term) // проверяем, изменилась ли строка if (jQuery('#spterm').val().length>=minlen) < // проверяем длину строки dosearch(); // если все в порядке, приступаем к поиску >else jQuery('#spresult').html(' '); // если строка короткая, убираем текст из DIVа с результатом >);

Переход между фрагментами

Мало просто выделить фрагменты, гораздо удобнее организовать быстрый переход между ними. Под формой размещаем ссылку перехода на первый найденный фрагмент. Чтобы не занимать место стрелками, клик на каждый фрагмент ведет к следующему. Клик на последний фрагмент возвращает пользователя к форме поиска.

 if (n==0) jQuery('#spresult').html('Ничего не найдено'); else jQuery('#spresult').html('Результатов: '+n); if (n>1) // если больше одного фрагмента, то добавляем переход между ними < var i = 0; jQuery('span.highlight').each(function(i)< jQuery(this).attr('n', i++); // нумеруем фрагменты, более простого способа искать следующий элемент не нашел >); jQuery('span.highlight').not(':last').attr().click(function()< // всем фрагментам, кроме последнего, добавляем подсказку jQuery('body,html').animate(, scrollspeed); // переход к следующему фрагменту >); jQuery('span.highlight:last').attr().click(function()< jQuery('body,html').animate(, scrollspeed); // переход к форме поиска >); >

Задержка запуска поиска

Поиск в большом тексте и подсветка занимают несколько секунд, на которые страница зависает. При наборе длинного слова поиск производится после каждой введённой буквы.

 jQuery('#spterm').keyup(function()< var d1 = new Date(); time_keyup = d1.getTime(); if (jQuery('#spterm').val()!=term) // проверяем, изменилась ли строка if (jQuery('#spterm').val().length>=minlen) < // проверяем длину строки setTimeout(function()< // ждем следующего нажатия var d2 = new Date(); time_search = d2.getTime(); if (time_search-time_keyup>=keyint) // проверяем интервал между нажатиями dosearch(); // если все в порядке, приступаем к поиску >, keyint); > else jQuery('#spresult').html(' '); // если строка короткая, убираем текст из DIVа с результатом >); 

Бонус

 if (window.location.hash!="") // бонус < var t = window.location.hash.substr(1, 50); // вырезаем текст jQuery('#spterm').val(t).keyup(); // вставляем его в форму поиска jQuery('#spgo').click(); // переходим к первому фрагменту >

jQuery(document).ready(function()< var minlen = 3; // минимальная длина слова var paddingtop = 30; // отступ сверху при прокрутке var scrollspeed = 200; // время прокрутки var keyint = 1000; // интервал между нажатиями клавиш var term = ''; var n = 0; var time_keyup = 0; var time_search = 0; jQuery('body').delegate('#spgo', 'click', function()< jQuery('body,html').animate(, scrollspeed); // переход к первому фрагменту >); function dosearch() < term = jQuery('#spterm').val(); jQuery('span.highlight').each(function()< //удаляем старую подсветку jQuery(this).after(jQuery(this).html()).remove(); >); var t = ''; jQuery('div#content').each(function()< // в селекторе задаем область поиска jQuery(this).html(jQuery(this).html().replace(new RegExp(term, 'ig'), '$&')); // выделяем найденные фрагменты n = jQuery('span.highlight').length; // количество найденных фрагментов console.log('n = '+n); if (n==0) jQuery('#spresult').html('Ничего не найдено'); else jQuery('#spresult').html('Результатов: '+n+'. Перейти'); if (n>1) // если больше одного фрагмента, то добавляем переход между ними < var i = 0; jQuery('span.highlight').each(function(i)< jQuery(this).attr('n', i++); // нумеруем фрагменты, более простого способа искать следующий элемент не нашел >); jQuery('span.highlight').not(':last').attr().click(function()< // всем фрагментам, кроме последнего, добавляем подсказку jQuery('body,html').animate(, scrollspeed); // переход к следующему фрагменту >); jQuery('span.highlight:last').attr().click(function()< jQuery('body,html').animate(, scrollspeed); // переход к форме поиска >); > >); > jQuery('#spterm').keyup(function()< var d1 = new Date(); time_keyup = d1.getTime(); if (jQuery('#spterm').val()!=term) // проверяем, изменилась ли строка if (jQuery('#spterm').val().length>=minlen) < // проверяем длину строки setTimeout(function()< // ждем следующего нажатия var d2 = new Date(); time_search = d2.getTime(); if (time_search-time_keyup>=keyint) // проверяем интервал между нажатиями dosearch(); // если все в порядке, приступаем к поиску >, keyint); > else jQuery('#spresult').html(' '); // если строка короткая, убираем текст из DIVа с результатом >); if (window.location.hash!="") // бонус < var t = window.location.hash.substr(1, 50); // вырезаем текст jQuery('#spterm').val(t).keyup(); // вставляем его в форму поиска jQuery('#spgo').click(); // переходим к первому фрагменту >>);

Недостатки

На больших страницах (примерно 60 кб текста) скрипт зависает на пару минут.

Спасибо за внимание, буду благодарен за замечания и идеи по улучшению работы скрипта.

Источник