Создать свою собственную панель поиска с автозаполнением проще, чем вы думаете
Панель поиска – это популярный элемент пользовательского интерфейса, который используется на многих современных сайтах. Если вы создаете сайт, содержащий какой-либо тип данных, вы можете захотеть, чтобы ваши пользователи могли искать определенные элементы
Существует множество способов создания панели поиска. Вы можете создавать сложные панели поиска, которые возвращают результаты на основе нескольких фильтров, таких как имя или дата. Существующие библиотеки могут помочь вам реализовать панель поиска, не создавая ее с нуля
Однако вы также можете создать простую панель поиска, используя ванильный JavaScript, который сравнивает введенные пользователем данные со списком строк
Как добавить пользовательский интерфейс для панели поиска
На вашем сайте должно быть поле ввода, в которое пользователи могут вводить текст, который они хотят найти. Один из способов сделать это – использовать тег input и стилизовать его под панель поиска
- Создайте папку для хранения вашего сайта. Внутри папки создайте HTML-файл с именем index.html.
- Наполните ваш файл базовой структурой HTML-документа. Если вы не знакомы с HTML, существует множество примеров HTML-кода, которые помогут вам войти в курс дела.
<!doctype html>
<html lang='en-US'>
<head>
<title>Searchbar</title>
</head>
<body>
<div class='container'>
<!-- Webpage content goes here-->
</div>
</body>
</html> - Внутри div класса контейнера добавьте тег input. Это позволит пользователю ввести текст, который он хотел бы найти. Каждый раз, когда пользователь будет вводить новый символ, ваш сайт будет вызывать функцию search(). Вы создадите эту функцию на последующих шагах.
<div class='container'>Атрибут автозаполнения гарантирует, что браузер не будет добавлять свой собственный выпадающий список, основанный на предыдущих условиях поиска.
<h2>Search Countries</h2>
<input id='searchbar' autocomplete='off' onkeyup='search()' type='text'
name='search' placeholder='What are you looking for?'>
</div> - В той же папке, что и файл index.html, создайте новый файл CSS с именем styles.css.
- Заполните этот файл стилями для всей веб-страницы и панели поиска:
body {
margin: 0;
padding: 0;
background-color: #f7f7f7;
}
* {
font-family: 'Arial', sans-serif;
}
.container {
padding: 100px 25%;
display: flex;
flex-direction: column;
line-height: 2rem;
font-size: 1. 2em;
color: #202C39;
}
#searchbar {
padding: 15px;
border-radius: 5px;
}
input[type=text] {
-webkit-transition: width 0. 15s ease-in-out;
transition: width 0. 15s ease-in-out;
} - В файле index.html добавьте ссылку на ваш файл CSS внутри тега head и под тегом title:
<link rel='stylesheet' href='styles.css'> - Откройте файл index.html в веб-браузере и просмотрите пользовательский интерфейс вашей панели поиска.
Как создать строки списка для панели поиска
Прежде чем пользователь сможет осуществлять поиск, необходимо создать список доступных элементов, которые он может искать. Это можно сделать с помощью массива строк. Строка – это один из многих типов данных, которые можно использовать в JavaScript, и может представлять собой последовательность символов
Вы можете динамически создать этот список с помощью JavaScript во время загрузки страницы
- Внутри index.html, под тегом input, добавьте div. Этот div будет отображать выпадающий список, который будет содержать список элементов, соответствующих тому, что ищет пользователь:
<div id='list'></div> - В той же папке, где находятся файл index.html и файл styles.css, создайте новый файл script.js.
- Внутри script.js создайте новую функцию loadSearchData(). Внутри функции инициализируйте массив со списком строк. Имейте в виду, что это небольшой статический список. Более сложная реализация должна будет учитывать поиск в больших наборах данных.
function loadSearchData() {
// Data to be used in the searchbar
let countries = [
'Australia',
'Austria',
'Brazil',
'Canada',
'Denmark',
'Egypt',
'France',
'Germany',
'USA',
'Vietnam'
];
} - Внутри loadSearchData() и под новым массивом получите элемент div, который будет отображать пользователю подходящие элементы поиска. Внутри div элемента list добавьте тег якоря для каждого элемента данных в списке:
// Get the HTML element of the list
let list = document.getElementById('list');
// Add each data item as an <a> tag
countries.forEach((country)=>{
let a = document.createElement('a');
a.innerText = country;
a.classList.add('listItem');
list.appendChild(a);
}) - В тег body файла index.html добавьте атрибут события onload для вызова новой функции loadSearchData(). Это позволит загрузить данные во время загрузки страницы.
<body onload='loadSearchData()'> - В файле index.html, перед окончанием тега body, добавьте тег script для ссылки на ваш файл JavaScript:
<body onload='loadSearchData()'>
<!-- Your webpage content -->
<script src='script.js'></script>
</body> - В файле styles.css добавьте некоторые стили для выпадающего списка:
#list {
border: 1px solid lightgrey;
border-radius: 5px;
display: block;
}
.listItem {
display: flex;
flex-direction: column;
text-decoration: none;
padding: 5px 20px;
color: black;
}
.listItem:hover {
background-color: lightgrey;
} - Откройте файл index.html в веб-браузере, чтобы увидеть панель поиска и список доступных результатов поиска. Функция поиска еще не работает, но вы должны увидеть пользовательский интерфейс, который она будет использовать:
Как создать выпадающий список с подходящими результатами в панели поиска
Теперь, когда у вас есть панель поиска и список строк для поиска, вы можете добавить функцию поиска. По мере того как пользователь будет вводить текст в панель поиска, будут отображаться только определенные элементы в списке
- В файле styles.css замените стили для списка, чтобы скрыть список по умолчанию:
#list {
border: 1px solid lightgrey;
border-radius: 5px;
display: none;
} - В файле script.js создайте новую функцию search(). Имейте в виду, что программа будет вызывать эту функцию каждый раз, когда пользователь вводит или удаляет символ из панели поиска. Некоторые приложения должны обращаться к серверу для получения информации. В таких случаях эта реализация может замедлить работу пользовательского интерфейса. Возможно, вам придется изменить реализацию, чтобы учесть это.
function search() {
// search functionality goes here
} - Внутри функции search() получите элемент HTML div для списка. Также получите элементы тега якоря HTML каждого элемента списка:
let listContainer = document.getElementById('list');
let listItems = document.getElementsByClassName('listItem'); - Получение ввода, который пользователь ввел в панель поиска:
let input = document.getElementById('searchbar').value
input = input.toLowerCase(); - Сравнивает введенные пользователем данные с каждым элементом в списке. Например, если пользователь вводит ‘a’, функция сравнит, находится ли ‘a’ внутри ‘Australia’, затем ‘Austria’, ‘Brazil’, ‘Canada’ и так далее. Если это совпадает, она отобразит этот элемент в списке. Если он не совпадает, то этот элемент будет скрыт.
let noResults = true;
for (i = 0; i < listItems.length; i++) {
if (!listItems[i].innerHTML.toLowerCase().includes(input) || input === '') {
listItems[i].style.display='none';
continue;
}
else {
listItems[i].style.display='flex';
noResults = false;
}
} - Если в списке совсем нет результатов, скройте список полностью:
listContainer.style.display = noResults ? 'none' : 'block'; - Щелкните на файле index.html, чтобы открыть его в веб-браузере.
- Начните вводить текст в строку поиска. По мере ввода текста список результатов будет обновляться, отображая только совпадающие результаты.
Использование панели поиска для поиска совпадающих результатов
Теперь, когда вы знаете, как создать панель поиска с выбором строки, вы можете добавить больше функциональности
Например, вы можете добавить ссылки в теги якорей, чтобы открывать разные страницы в зависимости от результата, на который нажимает пользователь. Вы можете изменить панель поиска для поиска по более сложным объектам. Вы также можете изменить код для работы с фреймворками, такими как React
Комментировать