Создать собственную поисковую строку с автозаполнением проще, чем вы думаете.
Панель поиска — это популярный элемент пользовательского интерфейса, который используют многие современные веб-сайты. Если вы создаете сайт, содержащий данные любого типа, вы можете захотеть, чтобы ваши пользователи могли искать определенные элементы.
Есть много способов создать панель поиска. Вы можете создавать сложные панели поиска, которые возвращают результаты на основе нескольких фильтров, таких как имя или дата. Существующие библиотеки могут помочь вам реализовать панель поиска, не создавая ее с нуля.
Однако вы также можете создать простую панель поиска с помощью ванильного JavaScript, которая сравнивает ввод пользователя со списком строк.
Как добавить пользовательский интерфейс для панели поиска
На вашем веб-сайте должно быть поле ввода, чтобы ваши пользователи могли вводить текст, который они хотят найти. Один из способов сделать это — использовать тег ввода и оформить его так, чтобы он выглядел как панель поиска.
- Создайте папку для хранения вашего сайта. Внутри папки создайте файл HTML с именем index.html.
- Заполните файл базовой структурой HTML-документа. Если вы не знакомы с HTML, существует множество Примеры HTML-кода, которые вы можете изучить чтобы помочь вам набрать скорость.
<!doctype html>
<html язык ="en-US">
<голова>
<заголовок>Панель поиска</title>
</head>
<тело>
<раздел класс ="контейнер">
<!-- Здесь размещается содержимое веб-страницы-->
</div>
</body>
</html> - Внутри div класса контейнера добавьте тег ввода. Это позволит пользователю ввести текст, который он хотел бы найти. Всякий раз, когда они вводят новый символ, ваш сайт будет вызывать функцию search(). Вы создадите эту функцию на следующих шагах.
Атрибут автозаполнения гарантирует, что браузер не добавит собственное раскрывающееся меню на основе предыдущих условий поиска.<раздел класс ="контейнер">
<h2>Страны поиска</h2>
<входной идентификатор ="панель поиска" автозаполнение ="выключенный" onkeyup="поиск()" тип="текст"
имя="поиск" заполнитель ="Что Вы ищете?">
</div> - В той же папке, что и ваш index.html файл, создайте новый файл CSS с именем стили.css.
- Заполните файл стилями для всей веб-страницы и панели поиска:
тело {
маржа: 0;
заполнение: 0;
фоновый цвет: #f7f7f7;
}
* {
семейство шрифтов: "Ариал", без засечек;
}
.контейнер {
отступ: 100 пикселей 25%;
дисплей: гибкий;
flex-направление: столбец;
высота строки: 2rem;
размер шрифта: 1.2эм;
цвет: № 202С39;
}
#панель поиска {
отступ: 15 пикселей;
радиус границы: 5px;
}
вход[тип=текст] {
-webkit-переход: ширина 0.15 слегкость входа;
переход: ширина 0.15 слегкость входа;
} - В index.html, добавьте ссылку на файл CSS внутри тега head и под тегом title:
<ссылка отн="таблица стилей" ссылка="стили.css"> - Открой index.html файл в веб-браузере и просмотреть пользовательский интерфейс панели поиска.
Как создать строки списка для панели поиска
Прежде чем пользователь сможет выполнять поиск, вам необходимо создать список доступных элементов, которые они могут искать. Вы можете сделать это с помощью массива строк. Строка является одним из многих типы данных, которые вы можете использовать в JavaScriptи может представлять собой последовательность символов.
Вы можете динамически создавать этот список с помощью JavaScript по мере загрузки страницы.
- Внутри index.html, под тегом ввода добавьте div. Этот div будет отображать раскрывающийся список, содержащий список элементов, соответствующих тому, что ищет пользователь:
<Идентификатор раздела ="список"></div> - В той же папке, что и ваш index.html файл и стили.css файл, создайте новый файл с именем script.js.
- Внутри script.js, создайте новую функцию с именем loadSearchData(). Внутри функции инициализируйте массив списком строк. Имейте в виду, что это небольшой статический список. Более сложная реализация должна будет учитывать поиск в больших наборах данных.
функцияloadSearchData() {
// Данные для использования в строке поиска
позволять страны = [
'Австралия',
'Австрия',
'Бразилия',
'Канада',
'Дания',
'Египет',
'Франция',
'Германия',
'США',
'Вьетнам'
];
} - Внутри loadSearchData() и под новым массивом получите элемент div, который будет отображать соответствующие элементы поиска для пользователя. Внутри div списка добавьте тег привязки для каждого элемента данных в списке:
// Получить HTML-элемент списка
позволять список = документ.getElementById('список');
// Добавляем каждый элемент данных как ярлык
страны.для каждого((страна)=>{
позволять а = документ.создатьЭлемент("а");
а.innerText = страна;
a.classList.добавить ("Элемент списка");
список.appendChild (а);
}) - В теге body index.html, добавьте атрибут события onload для вызова новой функции loadSearchData(). Это будет загружать данные по мере загрузки страницы.
<нагрузка на тело ="загрузить данные поиска ()"> - В index.html, прежде чем тег body закончится, добавьте тег script для ссылки на ваш файл JavaScript:
<нагрузка на тело ="загрузить данные поиска ()">
<!-- Содержание вашей веб-страницы -->
<источник сценария ="script.js"></script>
</body> - В стили.css, добавьте стиль в раскрывающийся список:
#список {
граница: 1px сплошной светло-серый;
радиус границы: 5px;
дисплей: блок;
}
.Элемент списка {
дисплей: гибкий;
flex-направление: столбец;
текстовое оформление: нет;
отступ: 5px 20px;
черный цвет;
}
.Элемент списка:наведите {
цвет фона: светло-серый;
} - Открыть index.html в веб-браузере, чтобы просмотреть панель поиска и список доступных результатов поиска. Функциональность поиска пока не работает, но вы должны увидеть пользовательский интерфейс, который она будет использовать:
Как создать раскрывающийся список с соответствующими результатами в строке поиска
Теперь, когда у вас есть панель поиска и список строк для поиска пользователями, вы можете добавить функцию поиска. Когда пользователь вводит в строку поиска, будут отображаться только определенные элементы в списке.
- В стили.css, замените стиль для списка, чтобы скрыть список по умолчанию:
#список {
граница: 1px сплошной светло-серый;
радиус границы: 5px;
дисплей: нет;
} - В script.js, создайте новую функцию с именем search(). Имейте в виду, что программа будет вызывать эту функцию каждый раз, когда пользователь вводит или удаляет символ из строки поиска. Некоторым приложениям потребуется обращение к серверу для получения информации. В таких случаях эта реализация может замедлить работу пользовательского интерфейса. Возможно, вам придется изменить реализацию, чтобы принять это во внимание.
функцияпоиск() {
// здесь находится функция поиска
} - Внутри функции search() получите HTML-элемент div для списка. Также получите элементы тега привязки HTML для каждого элемента внутри списка:
позволять списокКонтейнер = документ.getElementById('список');
позволять элементы списка = документ.getElementsByClassName('listItem'); - Получите ввод, который пользователь ввел в строку поиска:
позволять ввод = документ.getElementById('панель поиска').значение
ввод = ввод.toLowerCase(); - Сравните ввод пользователя с каждым элементом в списке. Например, если пользователь вводит «а», функция сравнит, находится ли «а» внутри «Австралия», затем «Австрия», «Бразилия», «Канада» и т. д. Если он совпадает, он отобразит этот элемент в списке. Если он не совпадает, он скроет этот элемент.
позволять нетрезультатов = истинный;
для (я = 0; я < списокэлементов.длина; я++) {
if (!listItems[i].innerHTML.toLowerCase().includes (input) || input "") {
listItems[i].style.display="никто";
продолжать;
}
еще {
listItems[i].style.display="сгибаться";
нетрезультатов = ЛОЖЬ;
}
} - Если в списке вообще нет результатов, скройте список полностью:
listContainer.style.display = noResults? "никто": "блокировать"; - Нажать на index.html файл, чтобы открыть его в веб-браузере.
- Начните вводить в строку поиска. По мере ввода список результатов будет обновляться и отображать только совпадающие результаты.
Использование панели поиска для поиска совпадающих результатов
Теперь, когда вы знаете, как создать панель поиска с выбором строки, вы можете добавить дополнительные функции.
Например, вы можете добавить ссылки к своим тегам привязки, чтобы открывать разные страницы в зависимости от результата, который нажимает пользователь. Вы можете изменить панель поиска для поиска по более сложным объектам. Вы также можете изменить код для работы с такими фреймворками, как React.