How to use react-autosuggest library In ReactJS

Q: How to use react-autosuggest library In ReactJS

In this approach we will use a third-party library react-autosuggest. We have to configure the Autocomplete component with essential props like getItemValue, items, renderItem, value, onChange, onSelect, and inputProps.

Using Basic Filtering

In this approach we will use a third-party library react-autosuggest. We have to configure the Autocomplete component with essential props like getItemValue, items, renderItem, value, onChange, onSelect, and inputProps.

Example: This example utilizes react-autosuggest library to add auto complete search box.

CSS

/* style.css */
.autocomplete-container {
    position: relative;
  }
  
  .suggestions-container {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #fff;
    border: 1px solid #ccc;
    border-top: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 10;
  }
  
  .suggestion {
    padding: 10px;
    cursor: pointer;
  }
  
  .suggestion:hover {
    background-color: #f0f0f0;
  }
  
  .suggestion-highlighted {
    background-color: #f0f0f0;
  }
  
  .autocomplete-input {
    width: 90%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
  }

JavaScript

// App.js
import React from 'react';
import AutocompleteSearch from './AutocompleteSearch';

const App = () => {
  return (
    <div>
      <h1>Autocomplete Search Example</h1>
      <AutocompleteSearch />
    </div>
  );
};

export default App;

JavaScript

// AutocompleteSearch.js
import React, { useState } from 'react';
import Autosuggest from 'react-autosuggest';
import './style.css'; // Import CSS file for custom styling

const AutocompleteSearch = () => {
  const [value, setValue] = useState('');
  const [suggestions, setSuggestions] = useState([]);

  // Mock data for suggestions
  const languages = [
    'React',
    'Angular',
    'Vue.js',
    'Ember.js',
    'Backbone.js',
    'Svelte',
    'Express.js',
    'Meteor.js',
    'Next.js',
    'Nuxt.js'
  ];

  const getSuggestions = (inputValue) => {
    const regex = new RegExp(inputValue.trim(), 'i');
    return languages.filter((language) => regex.test(language));
  };

  const onSuggestionsFetchRequested = ({ value }) => {
    setSuggestions(getSuggestions(value));
  };

  const onSuggestionsClearRequested = () => {
    setSuggestions([]);
  };

  const onChange = (event, { newValue }) => {
    setValue(newValue);
  };

  const getSuggestionValue = (suggestion) => suggestion;

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

  const inputProps = {
    placeholder: 'Type to search...',
    value,
    onChange
  };

  // Custom theme for styling
  const theme = {
    container: 'autocomplete-container',
    suggestionsContainer: 'suggestions-container',
    suggestion: 'suggestion',
    suggestionHighlighted: 'suggestion-highlighted',
    input: 'autocomplete-input'
  };

  return (
    <Autosuggest
      suggestions={suggestions}
      onSuggestionsFetchRequested={onSuggestionsFetchRequested}
      onSuggestionsClearRequested={onSuggestionsClearRequested}
      getSuggestionValue={getSuggestionValue}
      renderSuggestion={renderSuggestion}
      inputProps={inputProps}
      theme={theme} // Apply custom theme for styling
    />
  );
};

export default AutocompleteSearch;

Step to Run Application: Run the application using the following command from the root directory of the project

npm start

Output:

How to Add Auto-Complete Search Box in ReactJS?

An autocomplete search box is a user interface feature that offers suggestions as users type their queries. It enhances the user experience by providing real-time suggestions and help users find what they’re looking for more quickly. In this article, we will explore how to implement an autocomplete search box in ReactJS.

We will discuss two approaches to add auto-complete search box in reactjs

Table of Content