How to Create Autocomplete Search in React

Install Bootstrap using npm (Node Package Manager). Bootstrap's npm package includes both the compiled CSS and JavaScript files.

npm install bootstrap

Once the installation is complete, you can import Bootstrap styles into your project. Open the entry file of your React application (often index.js or index.jsx) and add the following line at the top:
Here, I'll add into src/App.js file:

import React, { Component } from 'react'

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

function App() {
  return (
    <div>
      <h2>How to Create Auto complete Search in React</h2>
    </div>
  );
}

export default App;

Build a new component for your autocomplete search bar. This component will handle user input, fetch suggestions, and update the UI accordingly:

import React, { Component } from 'react';
import Autosuggest from 'react-autosuggest';

class AutocompleteSearch extends Component {
  constructor(props) {
    super(props);

    this.state = {
      value: '',
      suggestions: []
    };
  }

  onChange = (event, { newValue }) => {
    this.setState({
      value: newValue
    });
  };

  onSuggestionsFetchRequested = ({ value }) => {
    const suggestions = this.getSuggestions(value);

    this.setState({
      suggestions: suggestions
    });
  };

  onSuggestionsClearRequested = () => {
    this.setState({
      suggestions: []
    });
  };

  getSuggestions = (value) => {
    const inputValue = value.trim().toLowerCase();
    const inputLength = inputValue.length;

    return inputLength === 0 ? [] : this.props.options.filter(option =>
      option.toLowerCase().slice(0, inputLength) === inputValue
    );
  };

  getSuggestionValue = suggestion => suggestion;

  renderSuggestion = suggestion => (
    <div>
      {suggestion}
    </div>
  );

  render() {
    const { value, suggestions } = this.state;

    const inputProps = {
      placeholder: this.props.placeholder,
      value,
      onChange: this.onChange
    };

    return (
      <Autosuggest
        suggestions={suggestions}
        onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
        onSuggestionsClearRequested={this.onSuggestionsClearRequested}
        getSuggestionValue={this.getSuggestionValue}
        renderSuggestion={this.renderSuggestion}
        inputProps={inputProps}
      />
    );
  }
}

export default AutocompleteSearch;

Integrate the AutocompleteSearch component into the desired part of your application. This might be a search page, a navigation bar, or any location where search functionality is needed.

// App.js

import React, { Component } from 'react';
import AutocompleteSearch from './AutocompleteSearch';

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      options: [
        'React',
        'Laravel',
        'Vue',
        'PHP',
        'Angular'
      ]
    };
  }

  render() {
    return (
      <div>
        <AutocompleteSearch options={this.state.options} placeholder="Type 'r', 'l', 'v', 'p', or 'a'" />
      </div>
    );
  }
}

export default App;

Test your autocomplete search functionality, make any necessary adjustments, and refine the user experience based on feedback and testing results.

In conclusion, implementing an autocomplete search in React elevates user interaction, providing a seamless and intuitive search experience. With straightforward steps and the right components, you can enhance your React application effortlessly, delivering a more dynamic and user-friendly interface.

Happy coding!

You might also like:

• Read Also: How to Add Soft Delete in Laravel 10
• Read Also: How to Create Multiple Authentication in Laravel 10
• Read Also: Laravel 10 React Auth Scaffolding Example
• Read Also: How To Create Dynamic Bar Chart In Laravel 10