Поиск на HTML сайте
Устанавливаем поиск на сайте с помощью скрипта phprusearch.
Скачайте скрипт из раздела скриптов.
Распакуйте архив и закачайте папку phprusearch в корень сервера (обычно папка public_html).
Установите следующие права доступа:
Зайдите по адресу http://ваш сайт/phprusearch/sadmin/
Если всё сделали правильно, появится окошко:
В поле «Логин» вводите admin , а в поле «Пароль» вводим pass .
В админке поменяйте пароль на свой в пункте «Смена пароля», а затем заходите в пункт меню «Настройка».
Установите название сайта и остальные настройки, если необходимо.
Не забудьте перечислить те папки, которые индексировать не нужно.
Жмите пункт меню «Индексация». Должен вылезти попап с результатами.
В той странице Вашего сайта, где Вы хотите видеть поисковую форму вставляйте следующий код:
Пробуйте что-нибудь поискать.
Дизайн страницы с результатами задаётся файлом index.php в папке phprusearch. Можете открыть этот фаил и до значка <? вставить шапку, а после значка ?> вставить нижнюю часть.
Статистику запросов, можете смотреть в админке. Для этого там есть пункт меню «Запросы».
Устанавливаем поиск на сайте от Яндекса.
Поиск от Яндекса конечно классный, но вот статистику запросов с помощью него Вы посмотреть не сможете.
Для того, чтобы установить поиск от Яндекса к себе на сайт, необходимо вставить примерно такую форму в ту страницу, где Вы желаете видеть поисковую форму.
Естественно параметры http://ruseller.com измените на свой сайт. Иначе Ваша форма будет искать по моему сайту.
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.ruseller.com
Автор: Евгений Попов
Урок создан: 29 Декабря 2007
Просмотров: 177205
Правила перепечатки
5 последних уроков рубрики «Для сайта»
Эффекты блочного раскрытия
Сегодня мы хотели бы поделиться несколькими идеями касающегося эффекта блочного раскрытия, которую вы можете использовать для своих проектов.
15 полезных .htaccess сниппета для сайта на WordPress
Если вы хотите существенно повысить уровень безопасности вашего сайта на WordPress, то вам не избежать конфигурации файла .htaccess. Это позволит не только уберечься от целого ряда хакерских атак, но и организовать перенаправления, а также решить задачи связанные с кэшем.
20 бесплатных тем для WordPress в стиле Material Design
Material Design — это набирающий обороты тренд от Google. В данной подборке собраны бесплатные темы для WordPress, выполненные в этом популярном стиле.
20 сайтов с креативным MouseOver эффектом
Эффекты на то и существуют чтобы впечатлять наших посетителей. В этой подборке собрано несколько десятков ресурсов, чьи создатели очень постарались впечатлить своих посетителей.
45+ бесплатных материалов для веб дизайнеров за август 2016
Под конец месяца предлагаем ознакомиться с набором бесплатных материалов для веб дизайнеров за прошедший месяц.
How To: Build A Simple Search Bar in JavaScript
Today, we will be walking through how to build a functional, yet very simple search bar in JavaScript. This mini project will also utilize CSS and HTML.
Let’s look at our goals:
Now that we have a clear outline of what we need to achieve. let’s get started!
Creating Base Files
Remember: this is a simple project. You may want to add and embellish this as you want. But for today’s needs, we will only need three (3) files:
- index.js
- index.html
- style.css
We have one (1) JavaScript file which will hold our event listeners, functions, variable declarations + assignments, and our basic data.
We have one (1) HTML file which will hold our DOM elements and portray our code in a visible format onto the web page.
And we have one (1) CSS file which we will use to style our HTML elements and add some flair + creativity.
You can create these files directly in your code editor(by right clicking and choosing «new file» or using the new file button) or in your terminal:
Exit fullscreen mode
Building out the Basics of HTML
I usually utilize the standard pattern of HTML5 to get started; it looks something like this:
Exit fullscreen mode
In the title tags, you may name your project anything you would like. This is not necessarily visible on the browser page, but visible as the tab label on your browser.
Exit fullscreen mode
Two (2) important things to initially add (and by initially, I mean right away!) are the necessary link and script tags. Get into the practice of adding a link tag of style.css file and a script tag of your index.js file as you begin to build out your HTML file.
Exit fullscreen mode
The stylesheets should go in the head tag portion of your HTML file. This tag allows whatever styling you program in your CSS file to appear visibly on the browser.
While the script tag to your JavaScript file should go in the body tag. It is common to put it toward the bottom. It is important to connect your HTML file with any of your JS files. Your JS files will reference DOM elements from your HTML.
Exit fullscreen mode
Now, we will need some elements nested in the body of our HTML. We will definitely need:
- a form element with an input field
- a «clear» button to clear our results
- an unordered list element to hold our results
Here is an example:
Exit fullscreen mode
With each element, provide a «class» name and/or «id». Make sure the class names or id names reflect what the element is doing or providing.
From outside-in, I created a div element called «form-container»; this is a regular standard in JavaScript. We want our different sections, that have specific roles, to be nested in their own containers. So, our form container contains the form and the adjacent buttons. Then, we have another div called «results-container», this will hold our results.
Within our form container, I created a form element. This holds our succeeding form elements. I created an input tag with a type of «text». This allows the user to type inside the input form. I also provided a class name, id and a placeholder. I then created a «submit» button with a type of «submit»; this button also has a class name. The text between the button tags will showcase «search» on the button in the browser. The same idea goes for the «clear» button.
Our browser should look something like this:
So, our HTML file is set: let’s continue onto our JavaScript file.
Creating Simple Data
Since we are not referencing an API, as this is a simple project, we are going to create some simple data to be rendered onto the page as search results. Head into your index.js file.
I like to create data using JavaScript nested arrays. For today’s example, our data is going to be people’s names. So our array is going to be called «people».
Exit fullscreen mode
Each array item is going to be an object — meaning each array item is going to have a property and value.
Exit fullscreen mode
Here is our simple data! Feel free to create an array of food, colors, TV shows. anything you want!
Establishing Event Listeners
We have to establish two (2) event listeners. An event listener waits for an event to happen (a «click», a «keystroke», «input») and then invokes an action. In this case, we need to have something happen when input is typed into the input form and when the clear button is clicked. In JavaScript, event listener syntax looks something like this:
Exit fullscreen mode
So, for our input form to have an event listener attached to it, I am going to use a querySelector to retrieve the button by its class name and set it to a constant (so that it can be used later).
Exit fullscreen mode
I am now going to attach the event listener to the constant we declared and assigned:
Exit fullscreen mode
Let’s create a foundation for the clear button:
Exit fullscreen mode
Showing Results on the Page
To show our results, we have to ultimately iterate through our simple data and if any of the data matches the input value, then append the data to the page (visibly).
Let’s create a function that first appends the results to the webpage.
Exit fullscreen mode
Now, that we have written how to append the results to the page; we need to focus on figuring out what should be appended to the page.
If we go back to our event listener, we left off at #4.
We are going to call «setList()» and pass in our people array, but not the whole array. We are going to filter through the people array and only use the items of «people» whose name value’s include the value of the search input.
Exit fullscreen mode
Let’s test this, if we type «be» into our search bar, «becky» should appear on the page underneath the search bar.
What do you see ?
Clearing Results from the Page
To remove the results from the page, we need to call on our «list» element and remove each child because right now our result items are children elements of «list».
An easy, quick way to do this is to remove the first child of the parent element, until there is no more. we can do this using a «while» loop.
** While Loops: while the condition is still true, do the action described. **
Exit fullscreen mode
We can refer to this function, clearList(), in our event listeners —
Организация поиска по веб-странице на JavaScript (без jQuery)
Пару дней назад получил тестовое задание от компании на вакансию Front-end dev. Конечно же, задание состояло из нескольких пунктов. Но сейчас речь пойдет только об одном из них — организация поиска по странице. Т.е. банальный поиск по введенному в поле тексту (аналог Ctrl+F в браузере). Особенность задания была в том, что использование каких-либо JS фреймворков или библиотек запрещено. Все писать на родном native JavaScript.
(Для наглядности далее буду сопровождать всю статью скринами и кодом, чтоб мне и вам было понятнее, о чем речь в конкретный момент)
Поиск готового решения
Первая мысль: кто-то уже точно такое писал, надо нагуглить и скопипастить. Так я и сделал. За час я нашел два неплохих скрипта, которые по сути работали одинаково, но были написаны по-разному. Выбрал тот, в коде которого лучше разобрался и вставил к себе на старничку.
Если кому интересно, код брал тут.
Скрипт сразу заработал. Я думал, что вопрос решен, но как оказалось, не в обиду автору скрипта, в нем был огромный недостаток. Скрипт вел поиск по всему содержимому тега . и, как вы уже наверное догадались, при поиске любого сочетания символов, которые напоминают тег или его атрибуты, ломалась вся страница HTML.
Почему скрипт работал некорректно?
Все просто. Скрипт работает следующим образом. Сперва в переменную записываем все содержимое тега body, затем ищем совпадения с регулярным выражением (задает пользователь при вводе в текстовое поле) и затем заменяем все совпадения на следующий код:
А затем заменяем текущий тег body на новый полученный. Разметка обновляется, меняются стили и на экране подсвечиваются желтым все найденные результаты.
Вы уже наверняка поняли, в чем проблема, но я все же объясню подробней. Представьте, что в поле поиска ввели слово «div». Как вы понимаете, внутри body есть множество других тегов, в том числе и div. И если мы всем к «div» применим стили, указанные выше, то это уже будет не блок, а непонятно что, так как конструкция ломается. В итоге после перезаписи разметки мы получим полностью сломанную веб-страницу. Выглядит это так.
Было до поиска: 
Просмореть полностью
Стало после поиска: 
Просмореть полностью
Как видите, страница полностью ломается. Короче говоря, скрипт оказался нерабочим, и я решил написать свой с нуля, чему и посвящается эта статья.
Итак пишем скрипт с нуля
Как все у меня выглядит.
Сейчас нас интересует форма с поиском. Обвел ее красной линией.
Давайте немного разберемся. Я это реализовал следующим образом (пока чистый HTML). Форма с тремя тегами.
Первый — для ввода текста;
Второй — для для отмены поиска (снять выделение);
Третий — для поиска (выделить найденные результаты).
Итак, у нас есть поле для ввода и 2 кнопки. JavaScript буду писать в файле js.js. Предпложим, что его вы уже создали и подключили.
Первое, что сделаем: пропишем вызовы функции при нажатии на кнопку поиска и кнопку отмены. Выглядеть будет так:
Давайте немного поясню что тут и зачем нужно.
Полю с текстом даем id=«text-to-find» (по этому id будем обращатсья к элементу из js).
Кнопке отмены даем такие атрибуты: type=«button» onclick=«javascript: FindOnPage(‘text-to-find’,false); return false;»
— Тип: button
— При нажатии вызывается функция FindOnPage(‘text-to-find’,false); и передает id поля с текстом, false
Кнопке поиска даем такие атрибуты: type=«button» onclick=«javascript: FindOnPage(‘text-to-find’,true); return false;»
— Тип: submit (не кнопка потому, что тут можно юзать Enter после ввода в поле, а так можете и button использовать)
— При нажатии вызывается функция FindOnPage(‘text-to-find’,true); и передает id поля с текстом, true
Вы наверняка заметили еще 1 атрибут: true/false. Его будем использовать для определения, на какую именно кнопку нажали (отменить поиск или начать поиск). Если жмем на отмену, то передаем false. Если жмем на поиск, то передаем true.
Окей, двигаемся дальше. Переходим к JavaScript
Будем считать, что вы уже создали и подключили js файл к DOM.
Прежде, чем начнем писать код, давайте отвлечемся и сперва обсудим, как все должно работать. Т.е. по сути пропишем план действий. Итак, нам надо, чтоб при вводе текста в поле шел поиск по странице, но нельзя затрагивать теги и атрибуты. Т.е. только текстовые объекты. Как этого достичь — уверен есть много способов. Но сейчас будем использовать регулярные выражения.
Итак, следующее регулярное выражение будет искать только текст след. вида: ">… текст. <". Т.е. будет проходить поиск только текстовых объектов, в то время, как теги и атрибуты будут оставаться нетронутыми.
Так мы будем находить нужные части кода, которые будем парсить и искать совпадения с текстом, который ввел пользователь. Затем будем добавлять стили найденным объектам и после этого заменять html — код на новый.
Приступим. Сперва переменные, которые нам понадобятся.
И сразу определим locale_HTML значение независимо от того, ищем мы что-то или нет. Это нужно, чтоб сразу сохранить оригинал страницы и иметь взможность обнулять стили.
Ок, теперь уже стоит создать функцию, которая вызывается у нас из DOM. Сразу прикинем, что внутри у нас должны быть 2 функции, каждая из которых срабатывает в зависимости от нажатой кнопки. Ведь мы либо проводим поиск, либо обнуляем его. И контроллируется это атрибутом true/false, как вы помните. Так же надо понимать, что при повторном поиске прежние стили должны обнуляться. Таким образом получим следующее:
Ок, часть логики реализована, двигаемся дальше. Необходимо проверять полученное слово на количество символов. Ведь зачем нам искать 1 букву/символ. В общем, я решил эту возможность ограничить 3+ символа.
Итак, сперва приниамем значение, которое ввел пользователь, и, в зависимости от его длины, выполняем либо основную функцию поиска, либо функцию вывода предупреждения и обнуления. Выглядеть будет так:
Сейчас поясню этот участок кода. Единственное, что могло стать не ясно — вот эта строка:
function FindOnPageBack()
Тут все просто: метод innerHTML возвращает html код объекта. В данном случае мы просто заменяем текущий body на оригинальный, который мы сохранили при загрузке всей страницы.
Двигаемся дальше. Даем значения основным переменным.
Итак, на данном этапе у нас уже есть основные переменные и значения. Теперь надо придать нужным участкам кода стили с выделенным фоном. Т.е. проверка выбранного текста на регулярное выражение (по сути мы выбранный регулярным выражением текст снова парсим регулярным выражением). Для этого надо из введенного текста сделать регулярное выражение (сделали), а затем выполнить метод, переданный в виде такста. Тут нам поможет метод eval().
В общем, после того, как мы заменим текст и получим результат со стилями, надо текущий html заменить на полученный. Делаем.
По сути все готово, и скрипт уже работает. Но добавим еще пару деталей для красоты.
1) Обрежем пробелы у текста, который вводит пользователь. Вставляем этот код:
После этой строки:
2) Сделаем проверку на совпадения (если совпадений не найдено — сообщим об этом). Этот код вставляем внутрь функции function FindOnPageGo() после переменных.
Посмотреть исходник можно тут.
Скачать исходник можно тут.
Теперь все. Конечно, можно добавить скролл к первому найденному результату, живой поиск ajax, да и вообще улучшать можно бесконечно. Сейчас это довольно примитивный поиск по сайту. Целью статьи было помочь новичкам, если возникет такой же вопрос как у меня. Ведь простого готового решения я не нашел.
P.S.: для корректной работы необходимо убрать переносы текста в html документе в тех местах, где есть обычный текст между тегами.
Это не принципиально, можно от этих переносов избаляться автоматически на сервисе, но может подскажете заодно, как это пофиксить, если поймете раньше меня.
Также, если кто писал подобное, но с живым поиском, поделитесь исходником, будет интересно разобрать.
Буду рад выслушать конструкнтиную критику, мнения, может, рекомендации.
На днях дописал немного код, сделал живой поиск по странице. Так, что вопрос снят. Код HTML не менялся. JS можете посмотреть тут.
Поиск ведется по тегам с классом «place_for_live_search». Так что для того, чтоб алгоритм парсил нужный контент, добавляем класс и готово.
28 CSS Search Boxes
Collection of hand-picked free HTML and CSS search box code examples. Update of July 2020 collection. 5 new items.
Related Articles:
Author
- Ahmad Emran
- March 30, 2021
Links
Made with
- HTML / CSS
About a code
Awesome Search Box
Awesome search box. Using only HTML & CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
- Short Code
- October 26, 2020
Links
Made with
- HTML / CSS
About a code
Search Box
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
- Yuhomyan
- September 13, 2020
Links
Made with
- HTML / CSS
About a code
Search Box Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
- Jon Kantner
- July 21, 2020
Links
Made with
- HTML / CSS
About a code
Search Input Caret Jump
A search input animation in which the magnifying glass handle flies off, becomes a caret, and plants itself into the field.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
- Coding Script
- July 21, 2020
Links
Made with
- HTML / CSS
About a code
Search Box Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
- co0kie
- April 25, 2020
Links
Made with
- HTML / CSS (SCSS)
About a code
Custom Search
Custom CSS search box with shadow and smoke text.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
- Milan Raring
- March 8, 2020
Links
Made with
- HTML / CSS (SCSS)
About a code
Search Animation — Only CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
- Jon Kantner
- December 19, 2019
Links
Made with
- HTML / CSS
About a code
Animated Search Interaction
A search animation where the head of the magnifying glass becomes the field and the handle grows into a search button. HTML5 validation of non-blank input ensures the field stays open when tabbing to the Search button.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
- Jonas Badalic
- December 2, 2019
Links
Made with
- HTML / CSS (SCSS)
About a code
Skeuomorphic Search Input
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
- Liam
- October 12, 2019
Links
Made with
- HTML / CSS (SCSS)
About a code
:placeholder-shown Selector
Trying out the :placeholder-shown selector to make a search form. With no JS, it validates and shows/hides the submit button.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
- Takane Ichinose
- February 18, 2019
Links
Made with
- HTML (Pug) / CSS (SCSS) / JS
About the code
Search Box Version 2
Compatible browsers: Chrome, Firefox, Opera, Safari
Author
- Chris Smith
- February 8, 2019
Links
Made with
- HTML / CSS (SCSS)
About the code
Search Box Focus Effect
Adding a thick outline on focus.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
- Aaron Iker
- November 7, 2018
Links
Made with
- HTML / CSS (SCSS)
About the code
Search Input Animation
A small little pure CSS animation of search interaction.
Compatible browsers: Chrome, Firefox, Opera, Safari
Author
- Omar Sherif
- October 30, 2018
Links
Made with
- HTML / CSS
About the code
Pure CSS Animated Search Bar
Animated seach box using pure HTML & CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
- Himalaya Singh
- September 15, 2018
Links
Made with
- HTML / CSS
About the code
Search Form With Animated Search Button
Search form with animated search button which transforms into right arrow on hover.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
- Menelaos
- September 11, 2018
Links
Made with
- HTML / CSS
About the code
Expandable Search Bar Animation
Hover effect for search bar in HTML & CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
- Ana Tudor
- August 10, 2018
Links
Made with
- HTML / CSS (SCSS)
About the code
Pure CSS Expanding Search
Pure CSS expanding search with custom properties.
Compatible browsers: Chrome, Firefox, Opera, Safari
Author
- Albert Feynman
- August 9, 2018
Links
Made with
- HTML / CSS (SCSS)
About the code
Search Bar
Animated search bar.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
- Takane Ichinose
- July 7, 2018
Links
Made with
- HTML / CSS
About the code
Search Box
Nice search box. Click on search icon, then type your keyword.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
- Lucas Henrique
- May 23, 2018
Links
Made with
- HTML (Pug) / CSS (Sass)
About the code
Animated Search Input
Animated (focus/transition only) search input that looks like a icon.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
- Steve Gardner
- May 11, 2018
Links
Made with
- HTML / CSS (SCSS) / JavaScript (Babel)
About the code
Expanding Input
A slighty different implementation of Keyframers version.
Compatible browsers: Chrome, Firefox, Opera, Safari
Author
- Shaw
- May 10, 2018
Links
Made with
- HTML / CSS (SCSS) / JavaScript
About the code
Increasing Input
Expanding search field with CSS.
Compatible browsers: Chrome, Firefox, Opera, Safari
Author
- Charlie Marcotte
- July 6, 2017
Links
Made with
- HTML (Pug) / CSS (Sass)
About the code
Simple On-click Search Field Interaction
All the icons/images are made with CSS — the onlick interaction is done with the sibling selector
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
- Mihael Tomić
- May 29, 2017
Links
Made with
- HTML / CSS (PostCSS)
About the code
CSS Effect for Search Input
Just a simple and a bit fancy CSS effect for input field.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
- Jarno van Rhijn
- February 3, 2016
Links
Made with
- HTML / CSS (SCSS)
About the code
Animating Search Box
An animating search box made with HTML & CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
- Jamie Coulter
- January 12, 2016
Links
Made with
- HTML (Haml) / CSS (SCSS)
About the code
CSS Search Box
Pretty search box in HTML and CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
- Nikolay Talanov
- March 29, 2015
Links
Made with
- HTML / CSS (SCSS)
About the code
Search Input Animation
Search input animation (pure css, without svg). Added variables for width , height and border-width , so now you can easily change overall dimensions of this search input. This demo have only one problem — no input autofocus after opening click.