How to use Basic Filtering In ReactJS

Steps to Setup ReactJS Application and Installing Required Modules

In this approach we maintain a static list of suggestions and filter these suggestions based on the user’s input. It uses the useState hook to manage the input value and filtered suggestions. When the user types in the input box, the list of suggestions is filtered in real-time to match the input.

Example: This example utilizes basic filtering to add auto complete search box.

CSS

/* style.css */
* {
    box-sizing: border-box;
  }
  
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
  }
  
  .autocomplete-container {
    position: relative;
    width: 100%;
    max-width: 400px;
    margin: 0 20px;
  }
  
  .autocomplete-input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    outline: none;
  }
  
  .autocomplete-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #fff;
    border: 1px solid #ccc;
    border-top: none;
    border-radius: 0 0 5px 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    list-style: none;
    padding: 0;
    margin: 0;
    z-index: 1000;
  }
  
  .autocomplete-suggestion {
    padding: 10px;
    cursor: pointer;
    transition: background-color 0.3s;
  }
  
  .autocomplete-suggestion:hover {
    background-color: #f0f0f0;
  }

JavaScript

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

const App = () => {
  const suggestions = ['Apple', 'Banana', 'Orange', 'Pineapple', 'Grapes'];

  return (
    <div>
      <h1>Autocomplete Example</h1>
      <Autocomplete suggestions={suggestions} />
    </div>
  );
};

export default App;

JavaScript

// Autocomplete.js
import React, { useState } from 'react';
import './style.css';

const Autocomplete = ({ suggestions }) => {
  const [filteredSuggestions, setFilteredSuggestions] = useState([]);
  const [inputValue, setInputValue] = useState('');

  const handleChange = (event) => {
    const inputValue = event.target.value;
    setInputValue(inputValue);

    // Filter suggestions based on input value
    const filteredSuggestions = suggestions.filter(suggestion =>
      suggestion.toLowerCase().includes(inputValue.toLowerCase())
    );
    setFilteredSuggestions(filteredSuggestions);
  };

  const handleSelect = (value) => {
    setInputValue(value);
    setFilteredSuggestions([]);
  };

  return (
    <div className="autocomplete-container">
      <input
        className="autocomplete-input"
        type="text"
        value={inputValue}
        onChange={handleChange}
        placeholder="Type to search..."
      />
      <ul className="autocomplete-suggestions">
        {filteredSuggestions.map((suggestion, index) => (
          <li key={index} className="autocomplete-suggestion" onClick={() => handleSelect(suggestion)}>
            {suggestion}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default Autocomplete;

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