React Js: Автозаполнение поиска в приложении react js
В этом руководстве вы узнаете, как реализовать автозаполнение поиска в приложении react js с помощью плагина react-autocomplete.
Помимо плагина react-autocomplete, есть много других плагинов. С помощью которого вы можете добавить функцию автозаполнения поиска в свое приложение.
В этом уроке вы шаг за шагом узнаете, как создать панель поиска с автозаполнением, как Google, в приложении React JS с помощью плагина react-autocomplete.
Пример по автозаполнению формы поиска на React
Используйте следующие шаги для реализации автозаполнения поиска в приложениях React JS:
Шаг 1 — Создайте приложение React
На этом шаге откройте свой терминал и выполните следующую команду, чтобы создать новое приложение:
npx create-react-app my-react-app
Чтобы запустить приложение React, выполните следующую команду на своем терминале:
npm start
Проверьте свое приложение React по этому URL-адресу: localhost:3000
Шаг 2 — Установите Bootstrap 4
На этом шаге выполните следующую команду, чтобы установить библиотеку boostrap 4 в ваше приложение:
npm install bootstrap --save
Добавьте файл bootstrap.min.css в файл src/App.js:
import React, { Component } from 'react'
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
function App() {
return (
<div>
<h2>How to Create Select Dropdown in React</h2>
</div>
);
}
export default App;
Шаг 3 — Установите react-autocomplete
На этом шаге выполните следующую команду, чтобы установить react-autocomplete в свое приложение:
npm i react-autocomplete --save
Шаг 4 – Создайте файл статических данных
На этом шаге вам понадобятся некоторые статические данные. Итак, зайдите в каталог src вашего приложения react js и создайте файл статических данных с именем dataService.js. И добавьте в него следующий код:
export function getCountry() {
return [
{name: 'Afghanistan', code: 'AF'},{name: 'Åland Islands', code: 'AX'},{name: 'Albania', code: 'AL'},{name: 'Algeria', code: 'DZ'},{name: 'American Samoa', code: 'AS'},{name: 'AndorrA', code: 'AD'},{name: 'Angola', code: 'AO'}, {name: 'Anguilla', code: 'AI'},{name: 'Antarctica', code: 'AQ'},{name: 'Antigua and Barbuda', code: 'AG'},{name: 'Argentina', code: 'AR'}, {name: 'Armenia', code: 'AM'},{name: 'Aruba', code: 'AW'}, {name: 'Australia', code: 'AU'},{name: 'Austria', code: 'AT'},{name: 'Azerbaijan', code: 'AZ'},{name: 'Bahamas', code: 'BS'}, {name: 'Bahrain', code: 'BH'},{name: 'Bangladesh', code: 'BD'}, {name: 'Barbados', code: 'BB'},{name: 'Belarus', code: 'BY'}, {name: 'Belgium', code: 'BE'}, {name: 'Belize', code: 'BZ'}, {name: 'Benin', code: 'BJ'}, {name: 'Bermuda', code: 'BM'},{name: 'Bhutan', code: 'BT'},{name: 'Bolivia', code: 'BO'},{name: 'Bosnia and Herzegovina', code: 'BA'}, {name: 'Botswana', code: 'BW'}, {name: 'Bouvet Island', code: 'BV'}, {name: 'Brazil', code: 'BR'}, {name: 'British Indian Ocean Territory', code: 'IO'}, {name: 'Brunei Darussalam', code: 'BN'}, {name: 'Bulgaria', code: 'BG'}, {name: 'Burkina Faso', code: 'BF'}, {name: 'Burundi', code: 'BI'}, {name: 'Cambodia', code: 'KH'}, {name: 'Cameroon', code: 'CM'}, {name: 'Canada', code: 'CA'}, {name: 'Cape Verde', code: 'CV'},{name: 'Cayman Islands', code: 'KY'}, {name: 'Central African Republic', code: 'CF'}, {name: 'Chad', code: 'TD'}]
}
export function matchCountry(state, value) {
console.log(state);
console.log(value);
return (
state.name.toLowerCase().indexOf(value.toLowerCase()) !== -1 ||
state.code.toLowerCase().indexOf(value.toLowerCase()) !== -1
);
}
Шаг 5 – Создайте компонент автозаполнения
На этом шаге посетите каталог src вашего приложения react js и создайте компонент формы с именем AutocompleteComponent.js. И добавьте в него следующий код:
import React, { Component } from 'react';
import Autocomplete from 'react-autocomplete';
import { getCountry, matchCountry } from './dataService';
class AutocompleteComponent extends Component {
state = { value: '' };
render() {
return (
<div className = "card col-sm-6" style = {{ marginTop: 40, marginLeft: 50 }}>
<div class="card-header">
Country Name :
</div>
<div class="card-body">
<form>
<div className="form-group">
<Autocomplete
value={ this.state.value }
inputProps={{ id: 'states-autocomplete' }}
wrapperStyle={{ position: 'relative', display: 'inline-block' }}
items={ getCountry() }
getItemValue={ item => item.name }
shouldItemRender={ matchCountry }
onchange={(event, value) => this.setState({ value }) }
onselect={ value => this.setState({ value }) }
renderMenu={ children => (
<div className = "menu">
{ children }
</div>
)}
renderItem={ (item, isHighlighted) => (
<div
className={`item ${isHighlighted ? 'item-highlighted' : ''}`}
key={ item.abbr } >
{ item.name }
</div>
)}
/>
</div>
</form>
</div>
</div>
);
}
}
export default AutoCompleteComponent;
Шаг 6 — Добавьте компонент в App.js
На этом шаге вам нужно добавить файл AutocompleteComponent.js в файл src/App.js:
import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import AutocompleteComponent from './AutocompleteComponent'
function App() {
return (
<div className="App">
<AutocompleteComponent />
</div>
);
}
export default App;
Вывод
В этом руководстве вы узнали, как реализовать автозаполнение поиска в приложении react js.
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.