Как создать динамическое окно поиска в ReactJS?

Опубликовано: 7 Августа, 2021

Поле динамического поиска - это панель поиска с текстовым полем для ввода пользовательского ввода и последующего выполнения некоторой операции с вводом пользователя, чтобы показать ему динамические результаты на основе его ввода. Вызовы API выполняются всякий раз, когда пользователь начинает печатать, чтобы показать ему динамические параметры. Например, окно поиска Youtube, окно поиска Google и т. Д. Material UI для React имеет этот компонент, доступный для нас, и его очень легко интегрировать. Мы можем создать простое динамическое поле поиска в ReactJS, используя следующий подход.

Создание приложения React и установка модуля:

Шаг 1. Создайте приложение React, используя следующую команду:

 npx создать-реагировать-приложение имя папки

Шаг 2: После создания папки проекта, т.е. имени папки , перейдите в нее с помощью следующей команды:

 cd имя папки

Шаг 3: После создания приложения ReactJS установите модули material-ui, используя следующую команду:

npm install @ material-ui / core
npm install @ material-ui / lab

Структура проекта: это будет выглядеть следующим образом.

Структура проекта

App.js: теперь запишите следующий код в файл App.js. Здесь App - это наш компонент по умолчанию, в котором мы написали наш код.

Javascript

 import React, { useState } from 'react'
 import TextField from '@material-ui/core/TextField' ;
 import Autocomplete from '@material-ui/lab/Autocomplete' ;
 
const App = () => {
 
  const [myOptions, setMyOptions] = useState([])
 
  const getDataFromAPI = () => {
    console.log( "Options Fetched from API" )
 
    fetch( ' http://dummy.restapiexample.com/api/v1/employees ' ).then((response) => {
      return response.json()
    }).then((res) => {
      console.log(res.data)
      for ( var i = 0; i < res.data.length; i++) {
        myOptions.push(res.data[i].employee_name)
      }
      setMyOptions(myOptions)
    })
  }
 
  return (
    <div style={{ marginLeft: '40%' , marginTop: '60px' }}>
      <h3>Greetings from GeeksforGeeks!</h3>
      <Autocomplete
        style={{ width: 500 }}
        freeSolo
        autoComplete
        autoHighlight
        options={myOptions}
        renderInput={(params) => (
          <TextField {...params}
            onChange={getDataFromAPI}
            variant= "outlined"
            label= "Search Box"
          />
        )}
      />
    </div>
  );
 }
 
export App default 

Шаг для запуска приложения: запустите приложение, используя следующую команду из корневого каталога проекта:

 npm start

Вывод: Теперь откройте браузер и перейдите по адресу http: // localhost: 3000 / , вы увидите следующий вывод:

В приведенном выше примере вы можете видеть, что всякий раз, когда пользователь что-либо вводит, вызывается API для получения параметров, именно так мы можем отображать динамические параметры в поле поиска, как YouTube, Google и т. Д.

Technical Scripter JavaScript

Как создать динамическое окно поиска в ReactJS?

Javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ