Създаването на ваша собствена лента за търсене с автоматично довършване е по-лесно, отколкото си мислите.
Лентата за търсене е популярен елемент на потребителския интерфейс, който много съвременни уебсайтове използват. Ако изграждате сайт, който съдържа всякакъв тип данни, може да искате вашите потребители да могат да търсят конкретни елементи.
Има много начини, по които можете да създадете лента за търсене. Можете да създадете сложни ленти за търсене, които връщат резултати въз основа на множество филтри, като име или дата. Съществуващите библиотеки могат да ви помогнат да внедрите лента за търсене, без да я създавате от нулата.
Можете обаче също така да създадете проста лента за търсене, като използвате ванилен JavaScript, който сравнява въведеното от потребителя със списък от низове.
Как да добавите потребителския интерфейс за лентата за търсене
Вашият уебсайт трябва да включва поле за въвеждане, в което потребителите ви да въвеждат текста, който искат да търсят. Един от начините да направите това е да използвате таг за въвеждане и да го оформите така, че да изглежда като лента за търсене.
- Създайте папка за съхранение на вашия уеб сайт. В папката създайте HTML файл с име index.html.
- Попълнете вашия файл с основната структура на HTML документ. Ако не сте запознати с HTML, има много Примери за HTML код, които можете да научите за да ви помогне да стигнете до скоростта.
<!doctype html>
<html lang="en-US">
<глава>
<заглавие>Лента за търсене</title>
</head>
<тяло>
<div клас="контейнер">
<!-- Съдържанието на уеб страницата отива тук-->
</div>
</body>
</html> - Вътре в div на контейнерния клас добавете таг за въвеждане. Това ще позволи на потребителя да въведе текста, който иска да търси. Всеки път, когато въведат нов символ, уебсайтът ви ще извика функцията search(). Ще създадете тази функция в следващите стъпки.
Атрибутът за автоматично довършване гарантира, че браузърът няма да добави свое собствено падащо меню въз основа на предишни думи за търсене.<div клас="контейнер">
<h2>Търсене в държави</h2>
<входен id="лента за търсене" автодовършване="изключено" onkeyup="Търсене()" тип="текст"
име="Търсене" заместител ="Какво търсиш?">
</div> - В същата папка като вашата index.html файл, създайте нов CSS файл, наречен styles.css.
- Попълнете файла със стил за цялата уеб страница и лентата за търсене:
тяло {
марж: 0;
подплата: 0;
Цвят на фона: #f7f7f7;
}
* {
шрифтово семейство: "Arial", sans-serif;
}
.контейнер {
подложка: 100px 25%;
дисплей: гъвкав;
flex-direction: колона;
височина на реда: 2 rem;
размер на шрифта: 1.2em;
цвят: #202C39;
}
#searchbar {
подложка: 15px;
радиус на границата: 5px;
}
вход[тип=текст] {
-webkit-преход: ширина 0.15sлекота на влизане и излизане;
преход: ширина 0.15sлекота на влизане и излизане;
} - в index.html, добавете връзка към вашия CSS файл в тага head и под тага title:
<връзка rel="таблица със стилове" href="styles.css"> - Отвори index.html файл в уеб браузър и прегледайте потребителския интерфейс на вашата лента за търсене.
Как да създадете списък с низове за лентата за търсене
Преди потребителят да може да търси, ще трябва да създадете списък с налични елементи, които той може да търси. Можете да направите това с масив от низове. Низът е един от многото типове данни, които можете да използвате в JavaScriptи може да представлява поредица от знаци.
Можете динамично да създадете този списък с помощта на JavaScript, докато страницата се зарежда.
- Вътре index.html, под тага за въвеждане добавете div. Този div ще покаже падащо меню, което ще съдържа списък с елементи, които съответстват на това, което потребителят търси:
<div id="списък"></div> - В същата папка като вашата index.html файл и styles.css файл, създайте нов файл, наречен script.js.
- Вътре script.js, създайте нова функция, наречена loadSearchData(). Вътре във функцията инициализирайте масив със списък от низове. Имайте предвид, че това е малък статичен списък. По-сложното изпълнение ще трябва да вземе предвид търсенето в по-големи масиви от данни.
функцияloadSearchData() {
// Данни, които да се използват в лентата за търсене
позволявам държави = [
'Австралия',
'Австрия',
'Бразилия',
'Канада',
'Дания',
'Египет',
'Франция',
'Германия',
'САЩ',
'Виетнам'
];
} - Вътре в loadSearchData() и под новия масив вземете елемента div, който ще покаже съвпадащите елементи за търсене на потребителя. Вътре в div на списъка добавете маркер за котва за всеки елемент от данни в списъка:
// Вземете HTML елемента от списъка
позволявам списък = документ.getElementById('списък');
// Добавете всеки елемент от данни като етикет
държави.за всеки((държава)=>{
позволявам а = документ.createElement("a");
a.innerText = държава;
a.classList.add("listItem");
списък.appendChild (a);
}) - В етикета body на index.html, добавете атрибута на събитието onload, за да извикате новата функция loadSearchData(). Това ще зареди данните, докато страницата се зарежда.
<тяло onload="loadSearchData()"> - в index.html, преди етикетът body да свърши, добавете маркер на скрипт, за да свържете към вашия JavaScript файл:
<тяло onload="loadSearchData()">
<!-- Съдържанието на вашата уеб страница -->
<скрипт src="script.js"></script>
</body> - в styles.css, добавете малко стил към падащия списък:
#списък {
рамка: 1px плътно светло сиво;
радиус на границата: 5px;
дисплей: блок;
}
.listItem {
дисплей: гъвкав;
flex-direction: колона;
текст-декорация: няма;
подложка: 5px 20px;
цвят черен;
}
.listItem:задръжте {
цвят на фона: светлосив;
} - Отворете index.html в уеб браузър, за да видите вашата лента за търсене и списъка с налични резултати от търсенето. Функцията за търсене все още не работи, но трябва да видите потребителския интерфейс, който ще използва:
Как да създадете падащото меню със съответстващи резултати в лентата за търсене
След като вече имате лента за търсене и списък с низове, които потребителите да търсят, можете да добавите функцията за търсене. Докато потребителят въвежда в лентата за търсене, ще се показват само определени елементи в списъка.
- в styles.css, заменете стила за списъка, за да скриете списъка по подразбиране:
#списък {
рамка: 1px плътно светло сиво;
радиус на границата: 5px;
дисплей: няма;
} - в script.js, създайте нова функция, наречена search(). Имайте предвид, че програмата ще извиква тази функция всеки път, когато потребителят въведе или премахне знак от лентата за търсене. Някои приложения ще се нуждаят от пътувания до сървър, за да извлекат информация. В такива случаи тази реализация може да забави потребителския ви интерфейс. Може да се наложи да промените изпълнението, за да вземете това предвид.
функцияТърсене() {
// функционалността за търсене е тук
} - Във функцията search() вземете HTML div елемента за списъка. Вземете също така елементите на HTML котвата на всеки елемент в списъка:
позволявам listContainer = документ.getElementById('списък');
позволявам listItems = документ.getElementsByClassName('listItem'); - Вземете въведените от потребителя данни в лентата за търсене:
позволявам вход = документ.getElementById('лента за търсене').стойност
вход = input.toLowerCase(); - Сравнете въведеното от потребителя с всеки елемент в списъка. Например, ако потребителят въведе „a“, функцията ще сравни дали „a“ е в „Австралия“, след това „Австрия“, „Бразилия“, „Канада“ и т.н. Ако съвпада, ще покаже този елемент в списъка. Ако не съвпада, ще скрие този елемент.
позволявам няма резултати = вярно;
за (i = 0; аз < listItems.length; i++) {
if (!listItems[i].innerHTML.toLowerCase().includes (input) || input "") {
listItems[i].style.display="нито един";
продължи;
}
друго {
listItems[i].style.display="flex";
няма резултати = невярно;
}
} - Ако в списъка изобщо няма резултати, скрийте го напълно:
listContainer.style.display = noResults? "нито един": "блок"; - Кликнете върху index.html файл, за да го отворите в уеб браузър.
- Започнете да пишете в лентата за търсене. Докато пишете, списъкът с резултати ще се актуализира, за да показва само съответстващи резултати.
Използване на лента за търсене за търсене на съответстващи резултати
След като вече знаете как да създадете лента за търсене с избор на низ, можете да добавите повече функционалност.
Например, можете да добавите връзки към вашите котвени маркери, за да отваряте различни страници в зависимост от резултата, върху който потребителят кликне. Можете да промените лентата си за търсене, за да търсите в по-сложни обекти. Можете също така да промените кода, за да работи с рамки като React.
