Как да филтрирате резултатите от търсенето, докато пишете с React

Как да филтрирате резултатите от търсенето, докато пишете с React

Лентите за търсене са чудесен начин да помогнете на потребителите да намерят това, от което се нуждаят на вашия уебсайт. Те също са добри за анализ, ако следите какво търсят посетителите ви.





Можете да използвате React, за да създадете лента за търсене, която филтрира и показва данни, докато потребителят въвежда. С кукичките на React и методите за карта на JavaScript и филтърен масив, крайният резултат е отзивчиво, функционално поле за търсене.



как да изтриете ненужен софтуер windows 10
MAKEUSEOF ВИДЕО НА ДЕНЯ

Търсенето ще вземе информация от потребител и ще задейства функцията за филтриране. Можеш използвайте библиотека като Formik, за да създавате формуляри в React , но можете също да създадете лента за търсене от нулата.





Ако нямате React проект и искате да следвате, създайте такъв с помощта на командата create-react-app.

npx create-react-app search-bar

В App.js файл, добавете елемента на формуляра, включително тага за въвеждане:



export default function App() { 
   return ( 
    <div> 
        <form> 
          <input type="search"/> 
        </form> 
    </div> 
  ) 
}

Трябва да използвате useState Реагирайте куката и на onChange събитие за контрол на входа. И така, импортирайте useState и променете входа, за да използвате стойността на състоянието:

import { useState } from "React" 
export default function App() { 
     const [query, setquery] = useState('') 
     const handleChange = (e) => { 
       setquery(e.target.value) 
     } 
     return ( 
      <div> 
          <form> 
            <input type="search" value={query} onChange={handleChange}/> 
          </form> 
      </div> 
    ) 
  }

Всеки път, когато потребител напише нещо във входния елемент, handleChange актуализира състоянието.



Филтриране на данните при промяна на входа

Лентата за търсене трябва да задейства търсене, използвайки заявката, която потребителят предоставя. Това означава, че трябва да филтрирате данните във функцията handleChange. Трябва също така да следите филтрираните данни в състоянието.

Първо, променете състоянието, за да включите данните:



как да държите лаптопа включен, когато е затворен 
const [state, setstate] = useState({ 
  query: '', 
  list: [] 
})

Групирането на стойностите на състоянието по този начин, вместо да се създава по една за всяка стойност, намалява броя на изобразяванията, подобрявайки производителността.

Данните, които филтрирате, могат да бъдат всичко, което искате да извършите търсене. Например, можете да създадете списък с примерни публикации в блог като този:

const posts = [ 
    {   
      url: '', 
      tags: ['react', 'blog'], 
      title: 'How to create a react search bar', 
    }, 
    { 
      url:'', 
      tags: ['node','express'], 
      title: 'How to mock api data in Node', 
    }, 
    // more data here 
  ]

Можете също извлечете данните с помощта на API от CDN или база данни.

След това променете функцията handleChange(), за да филтрирате данните всеки път, когато потребителят въвежда във входа.

const handleChange = (e) => { 
    const results = posts.filter(post => { 
        if (e.target.value === "") return posts 
        return post.title.toLowerCase().includes(e.target.value.toLowerCase()) 
    }) 
    setstate({ 
        query: e.target.value, 
        list: results 
    }) 
}

Функцията връща публикациите, без да търси в тях, ако заявката е празна. Ако потребителят е въвел заявка, той проверява дали заглавието на публикацията включва текста на заявката. Преобразуването на заглавието на публикацията и заявката в малки букви гарантира, че сравнението не е чувствително към главни и малки букви.

След като филтърният метод върне резултатите, функцията handleChange актуализира състоянието с текста на заявката и филтрираните данни.

Показване на резултатите от търсенето

Показването на резултатите от търсенето включва преминаване през масива от списък с помощта на карта метод и показване на данните за всеки елемент.

export default function App() { 
// state and handleChange() function 
   return ( 
    <div> 
        <form> 
          <input onChange={handleChange} value={state.query} type="search"/> 
        </form> 
        <ul> 
          {(state.query === '' ? "" : state.list.map(post => { 
            return <li key={post.title}>{post.title}</li> 
          }))} 
        </ul> 
    </div> 
  ) 
}

Вътре в етикета ul компонентът проверява дали заявката е празна. Ако е така, той показва празен низ, защото означава, че потребителят не е търсил нищо. Ако искате да търсите в списък с елементи, които вече показвате, премахнете тази отметка.

Ако заявката не е празна, методът map итерира резултатите от търсенето и изброява заглавията на публикациите.

Можете също да добавите проверка, която показва полезно съобщение, ако търсенето не върне резултати.

Пакетът на Amazon е повреден и няма да бъде доставен 
<ul> 
  {(state.query === '' ? "No posts match the query" : !state.list.length ? "Your query did not return any results" : state.list.map(post => { 
    return <li key={post.title}>{post.title}</li> 
  }))} 
</ul>

Добавянето на това съобщение подобрява потребителското изживяване, тъй като потребителят не остава да гледа празно място.

Обработване на повече от веднъж параметър за търсене

Можете да използвате React състояние и кукички, заедно с JavaScript събития, за да създадете персонализиран елемент за търсене, който филтрира масив от данни.

Филтърната функция проверява само дали заявката съответства на едно свойство – заглавие – в обектите в масива. Можете да подобрите функционалността за търсене, като използвате логическия оператор ИЛИ, за да съпоставите заявката с други свойства в обекта.