Лентите за търсене са чудесен начин да помогнете на потребителите да намерят това, от което се нуждаят на вашия уебсайт. Те също са добри за анализ, ако следите какво търсят посетителите ви.
Можете да използвате React, за да създадете лента за търсене, която филтрира и показва данни, докато потребителят въвежда. С кукичките на React и методите за карта на JavaScript и филтърен масив, крайният резултат е отзивчиво, функционално поле за търсене.
Създаване на лентата за търсене
Търсенето ще вземе информация от потребител и ще задейства функцията за филтриране. Можеш използвайте библиотека като Formik, за да създавате формуляри в React, но можете също да създадете лента за търсене от нулата.
Ако нямате React проект и искате да следвате, създайте такъв с помощта на командата create-react-app.
npx създавам-реагиране-приложение Търсене- бар
В App.js файл, добавете елемента на формуляра, включително тага за въвеждане:
износпо подразбиранефункцияПриложение() {
връщане (
<див>
<форма>
<тип вход ="Търсене"/>
</form>
</div>
)
}
Трябва да използвате useStateРеагирайте куката и на onChange събитие за контрол на входа. И така, импортирайте useState и променете входа, за да използвате стойността на състоянието:
импортиране {useState} от "реагирай"
износпо подразбиранефункцияПриложение() {
const [query, setquery] = useState('')
конст handleChange = (e) => {
setquery(д.мишена.стойност)
}
връщане (
<див>
<форма>
<тип вход ="Търсене" стойност={заявка} onChange={handleChange}/>
</form>
</div>
)
}
Всеки път, когато потребител напише нещо във входния елемент, handleChange актуализира състоянието.
Филтриране на данните при промяна на входа
Лентата за търсене трябва да задейства търсене, използвайки заявката, която потребителят предоставя. Това означава, че трябва да филтрирате данните във функцията handleChange. Трябва също така да следите филтрираните данни в състоянието.
Първо, променете състоянието, за да включите данните:
конст [състояние, setstate] = useState({
запитване: '',
списък: []
})
Групирането на стойностите на състоянието по този начин, вместо да се създава по една за всяка стойност, намалява броя на изобразяванията, подобрявайки производителността.
Данните, които филтрирате, могат да бъдат всичко, което искате да извършите търсене. Например, можете да създадете списък с примерни публикации в блог като този:
конст публикации = [
{
URL адрес: '',
тагове: ['реагират', 'блог'],
заглавие: „Как да създавам реакция Търсене бар',
},
{
URL адрес:'',
тагове: ['възел','експресен'],
заглавие: 'Как да се подигравате с api данни в Node',
},
// повече данни тук
]
Можете също извлечете данните с помощта на API от CDN или база данни.
След това променете функцията handleChange(), за да филтрирате данните всеки път, когато потребителят въвежда във входа.
конст handleChange = (e) => {
конст резултати = публикации.филтър (пост => {
ако (e.target.value "") връщане на публикации
връщанепост.заглавие.toLowerCase().включва(д.мишена.стойност.toLowerCase())
})
setstate({
заявка: д.мишена.стойност,
списък: резултати
})
}
Функцията връща публикациите, без да търси в тях, ако заявката е празна. Ако потребителят е въвел заявка, той проверява дали заглавието на публикацията включва текста на заявката. Преобразуването на заглавието на публикацията и заявката в малки букви гарантира, че сравнението не е чувствително към главни и малки букви.
След като филтърният метод върне резултатите, функцията handleChange актуализира състоянието с текста на заявката и филтрираните данни.
Показване на резултатите от търсенето
Показването на резултатите от търсенето включва преминаване през масива от списък с помощта на карта метод и показване на данните за всеки елемент.
износпо подразбиранефункцияПриложение() {
// състояние и функция handleChange().
връщане (
<див>
<форма>
<input onChange={handleChange} value={state.query} type="Търсене"/>
</form>
<ул>
{(state.query ''? "": state.list.map (post => {
връщане <li ключ={post.title}>{post.title}</li>
}))}
</ul>
</div>
)
}
Вътре в етикета ul компонентът проверява дали заявката е празна. Ако е така, той показва празен низ, защото означава, че потребителят не е търсил нищо. Ако искате да търсите в списък с елементи, които вече показвате, премахнете тази отметка.
Ако заявката не е празна, методът map итерира резултатите от търсенето и изброява заглавията на публикациите.
Можете също да добавите проверка, която показва полезно съобщение, ако търсенето не върне резултати.
<ул>
{(state.query ''? "Няма публикации, отговарящи на заявката": !state.list.length? "Вашата заявка не върна никакви резултати": state.list.map (post => {
връщане <li ключ={post.title}>{post.title}</li>
}))}
</ul>
Добавянето на това съобщение подобрява потребителското изживяване, тъй като потребителят не остава да гледа празно място.
Обработване на повече от веднъж параметър за търсене
Можете да използвате React състояние и кукички, заедно с JavaScript събития, за да създадете персонализиран елемент за търсене, който филтрира масив от данни.
Филтърната функция проверява само дали заявката съответства на едно свойство – заглавие – в обектите в масива. Можете да подобрите функционалността за търсене, като използвате логическия оператор ИЛИ, за да съпоставите заявката с други свойства в обекта.
