Html строка поиска: Поле для поиска | htmlbook.ru

Вариант строки поиска с автоподстановкой без использования Search API

Как уже многие начали составлять методички о внедрении поиска с автоподстановкой на сайт.
http://drupal.ru/node/130905 gun_dose предлагает внедрять подобное на сайт с Search API, я пишу от поиске без Search API. Результат тут http://ukrigrushka.com.ua/

Понадобятся модули:
search_autocomplete
better_exposed_filters
mefibs
views_selective_filters
views_block_filter_block — не обяз

Поехали.

1. Вьюха, которая выводит товары. Помещена на отдельную страницу.

Ставим 2 блока для вывода фильтров

1) Строка поиска (в шапке, то для чего вы это читаете) — блок defaul
2) Фильтры производитель, материала, тип товара — блоки с фильтрами. Необязательно, но я поставил.

Будут выглядеть так:

Расставляем фильтры вьюхи по блокам.

1) Строка поиска ищет по заголовку товара, поэтому Заголовок в блок default
2) Каталог, Производитель, материал и т. п. — в блок с фильтрами. Внимание! Использован views_filters_selective.

Настройки Better Exposed Filters

Расставляем блоки в теме

1) Блок строки поиска — в «шапку». У меня регион для телефонов.
2) Блок остальных фильтров в содержимое. Показывать блок только на странице product-search* — путь главной вьюхи (крутим вверх.)

2. Вьюха автоподстановки. Выпадает в строке поиска.

В автоподстановке строки поиска будут выводиться:
— название товара
— его картинка
но можно выводить любые поля.

3. Настройки автоподстановки.

Собственно настройки модуля search_autocomplete. Находяться по адресу admin/config/search/search_autocomplete
Добавляем форму. Я уже добавил, поэтому редактирую свою.

Самое главное тут:
Use an existing view: — вьюха автоподстановки.
ID-селектор этой формы — Инпут строки поиска в «шапке». Firebug в помощь. Либо временно на странице настроек модуля включить «Use autocompletion helper tool for Search Autocomplete administrators. «

Осеннее обострение

18.10.2017
Дорогие товарищи, если хотите пользоваться модулем mefibs, вам нужно иметь нехило прокаченный навык JS / Jquery. Если вынесите строку поиска в отдельный mefibs-блок — может вылезти проблема — поиск не переходит на товар, если этот товар в поиске выскакивает всего один. При повторном вводе поискового запроса, проставленые галочки не сбрасываются, что тоже плохо.

На данный момент оптимальный вариант —
1. На странице поиска — все как сверху, но «Раскрытая форма в блоке: Нет»
2. Стилями скрываем строку поиска из фильтра.
3. Блок поиска — обычный HTML код:

<form action=»/product-search?title» method=»get»>                    
      <input type=»search» name=»title»>                  
</form>

Если кто-то пользуется похожими методами просьба написать о результатах.

Как добавить простое поисковое окно Google, Yahoo! или Bing на ваш сайт WordPress

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

Не смотря на то, что обработанные реализации поискового окна предлагаются различными бизнес-компаниями, я предпочитаю использовать только основные поисковые движки: Google, Yahoo! или Bing. Многие коммерческие предложения предоставляют пробный период, для того чтобы заинтересовать клиентов. Такие пробные версии часто включают размещённую на заметном месте рекламу, что может отпугнуть часть посетителей сайта.

Давайте добавим окно поиска на ваш сайт WordPress.

Стандартное окно поиска Google

Если для вашего сайта или блога важно свободное пространство, Вы можете легко разместить маленькое поисковое окно Google, которое удовлетворит ваши потребности. Код является комбинацией HTML и Javascript:

<form method="get" action="http://www.google.com/search">
<div>
  <table border="0" align="center" cellpadding="0">
  <tr><td>
  <input type="text"   name="q" size="25"
  maxlength="255" value="Google site search"
  onfocus="if(this. value==this.defaultValue)this.value=''; this.style.color='black';" onblur="if(this.value=='')this.value=this.defaultValue; "/>
  <input type="submit" value="Go!" />
  <input type="hidden" name="sitesearch" value="yoursite.com" /></td></tr>
  </table>
  </div>
</form>

Вы можете вставить этот код, например, в

Это поисковое окно почти сразу готово к работе. Просто измените «yoursite.com» в третей с конца строке на ваш домен. Другие настройки, такие как ширина строки, отступ перед ячейкой, и сообщение, которое отображается перед полем поиска, можно легко изменить перед загрузкой вашего скрипта на сайт.

Окно поиска Google с кнопками-переключателями

Выше описанное поисковое окно позволяет найти содержимое на указанном сайте. Однако, некоторые владельцы сайтов хотят дать пользователям сайта возможность выполнять поиск по ключевым словам и во всей сети Интернет.

В этом случае, самым простым решением является размещение поискового окна с двумя кнопками-переключателями: одна для Интернета и вторая для сайта, как это показано ниже:

Код для такого поискового окна выглядит следующим образом:

<form method="get" action="http://www.google.com/search">
<div>
  <table border="0" align="center" cellpadding="0">
  <tr><td>
  <input type="text"   name="q" size="25"
  maxlength="255" value="" />
  <input type="submit" value="Google Search" /></td></tr>
  <tr><td align="center">
  <input type="radio"  name="sitesearch" value="" />The Web
  <input type="radio"  name="sitesearch"
  value="yoursite.com" checked /> Only Your Site<br />
  </td></tr></table>
  </div>
</form>

Как и в предыдущем примере, просто измените “yoursite.com” на ваше название домена, и поисковое окно будет готово к работе. Обратите внимание, что по умолчанию выбран поиск по сайту.

Поисковое окно Bing с кнопками-переключателями

Для того чтобы добавить на сайт такое же поисковое окно, но с использованием поискового движка Bing, используйте следующие строки кода:

<form method="get" action="http://www.bing.com/search">
<div>
  <table border="0" align="center" cellpadding="0">
  <tr><td>
  <input type="text"   name="q" size="25"
  maxlength="255" value="" />
  <input type="submit" value="Bing Search" /></td></tr>
  <tr><td align="center">
  <input type="radio"  name="q1" value="" />The Web
  <input type="radio"  name="q1"
  value="site:yoursite.com" /> Only Your Site<br />
  </td></tr></table>
  </div>
</form>

В этом интерфейсе не выбрана ни одна из кнопок-переключателей. Если гость сайта вводит слово или фразу в поисковое окно, он по умолчанию получит результаты из сети Интернет.

Поисковое окно Yahoo с флаговой кнопкой

Последнее простое поисковое окно довольно интересное — оно содержит одну флаговую кнопку, а не две кнопки:

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

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

Если Вы хотите ознакомиться с большим количеством шаблонов, ознакомьтесь с нашей большой коллекцией шаблонов WordPress!

Эта запись была размещена в WordPress туториалы и помечена как bing, google, search, search form, yahoo. Добавьте в закладки постоянную ссылку.

 — HTML: Язык разметки гипертекста

Элементы типа search представляют собой текстовые поля, предназначенные для ввода пользователем поисковых запросов. Они функционально идентичны текстовым вводам, но могут быть стилизованы по-разному агентом пользователя.

Атрибут value содержит строку, представляющую значение, содержащееся в поле поиска. Вы можете получить это, используя

 searchTerms = mySearch.value;
 

9Атрибут 0003 size представляет собой числовое значение, указывающее, сколько символов должно быть в поле ввода. Значение должно быть числом больше нуля, а значение по умолчанию равно 20. Поскольку ширина символов различается, это может быть или не быть точным, и на это не следует полагаться; результирующий ввод может быть уже или шире, чем указанное количество символов, в зависимости от символов и шрифта (используемые настройки шрифта ).

Это означает, что , а не устанавливает ограничение на количество символов, которые пользователь может ввести в поле. Он лишь указывает приблизительно, сколько можно увидеть одновременно. Чтобы установить верхний предел длины входных данных, используйте кнопку 9.0003 maxlength атрибут.

проверка орфографии

проверка орфографии — это глобальный атрибут, который используется для указания, следует ли включать проверку орфографии для элемента. Его можно использовать на любом редактируемом контенте, но здесь мы рассмотрим особенности, связанные с использованием

ложь

Отключить проверку орфографии для этого элемента.

правда

Включить проверку орфографии для этого элемента.

«» (пустая строка) или нет значения

Следуйте стандартному поведению элемента для проверки орфографии. Это может быть основано на родительской настройке

проверки орфографии или других факторах.

В поле ввода может быть включена проверка орфографии, если для него не установлен атрибут readonly и он не отключен.

Значение, возвращенное чтением проверка орфографии может не отражать фактическое состояние проверки орфографии в элементе управления, если настройки пользовательского агента переопределяют настройку.

Для поиска полей ввода доступны следующие нестандартные атрибуты. Как правило, вам следует избегать их использования, за исключением случаев, когда это бесполезно.

autocorrect

Расширение Safari, атрибут autocorrect представляет собой строку, указывающую, следует ли активировать автоматическое исправление, когда пользователь редактирует это поле. Допустимые значения:

на

Включить автоматическое исправление опечаток, а также обработку текстовых подстановок, если таковые настроены.

от

Отключить автоматическое исправление и замену текста.

инкрементный

Логический атрибут инкрементальный — это расширение WebKit и Blink (поэтому поддерживается Safari, Opera, Chrome и т. д.), которое, если присутствует, указывает агенту пользователя обрабатывать ввод как поиск в реальном времени. Когда пользователь редактирует значение поля, пользовательский агент отправляет поиск событий в объект HTMLInputElement , представляющий поле поиска. Это позволяет вашему коду обновлять результаты поиска в режиме реального времени по мере того, как пользователь редактирует поиск.

Если инкрементный не указан, событие search отправляется только тогда, когда пользователь явно инициирует поиск (например, нажимая клавишу Enter или Return при редактировании поля).

Событие search ограничено по скорости, поэтому оно не отправляется чаще, чем интервал, определенный реализацией.

mozactionhint

Расширение Mozilla, которое дает подсказку о том, какое действие будет выполнено, если пользователь нажмет клавишу Enter или Return при редактировании поля.

Этот атрибут устарел: вместо него используйте глобальный атрибут enterkeyhint .

результатов

Атрибут результатов — поддерживается только Safari — представляет собой числовое значение, позволяющее переопределить максимальное количество записей, отображаемых в встроенное раскрывающееся меню предыдущих поисковых запросов элемента.

Значение должно быть неотрицательным десятичным числом. Если не указано или задано недопустимое значение, используется максимальное количество записей браузера по умолчанию.

Элементы типа search очень похожи на элементы типа text , за исключением того, что они специально предназначены для обработки условий поиска. По сути, они эквивалентны по поведению, но пользовательские агенты могут выбирать для них разные стили по умолчанию (и, конечно же, сайты могут использовать таблицы стилей для применения к ним пользовательских стилей).

Базовый пример

 <форма>
  <дел>
    
    Поиск