34 - Search Bar with Filtering and Suggestions

Description

Create a search bar component that allows users to enter search terms, provides real-time search suggestions based on entered text, filters displayed data based on the search term, and displays relevant suggestions and filtered results clearly.

Algorithm

1. Create a React component for the search bar

2. Define the data array to be searched

3. Use the useState hook to manage the search term and filtered data

4. Use the useEffect hook to fetch search suggestions from an API or database

5. Display the search suggestions and filtered results in a dropdown list

6. Filter the data array based on the search term

7. Display the filtered results in a list or table

Classes

• SearchBar: The main search bar component

• SearchSuggestion: A single search suggestion component

• FilteredResult: A single filtered result component

Code

SearchBar.js

import React, { useState, useEffect } from 'react';
import SearchSuggestion from './SearchSuggestion';
import FilteredResult from './FilteredResult';

const SearchBar = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const [filteredData, setFilteredData] = useState([]);
  const [searchSuggestions, setSearchSuggestions] = useState([]);

  useEffect(() => {
    const fetchSearchSuggestions = async () => {
      const response = await fetch('<search-url>');
      const data = await response.json();
      setSearchSuggestions(data);
    };
    fetchSearchSuggestions();
  }, [searchTerm]);

  const handleSearchTermChange = (event) => {
    const searchTerm = event.target.value;
    setSearchTerm(searchTerm);
    const filteredData = data.filter((item) => item.includes(searchTerm));
    setFilteredData(filteredData);
  };

  return (
    <div>
      <input type="search" value={searchTerm} onChange={handleSearchTermChange} />
      <ul>
        {searchSuggestions.map((suggestion) => (
          <SearchSuggestion key={suggestion.id} suggestion={suggestion} />
        ))}
      </ul>
      <ul>
        {filteredData.map((result) => (
          <FilteredResult key={result.id} result={result} />
        ))}
      </ul>
    </div>
  );
};

export default SearchBar;

SearchSuggestion.js

import React from 'react';

const SearchSuggestion = ({ suggestion }) => {
  return <li>{suggestion.label}</li>;
};

export default SearchSuggestion;

FilteredResult.js

import React from 'react';

const FilteredResult = ({ result }) => {
  return <li>{result.label}</li>;
};

export default FilteredResult;

Explanation

The code creates a search bar component that allows users to enter search terms, provides real-time search suggestions based on entered text, filters displayed data based on the search term, and displays relevant suggestions and filtered results clearly. The component uses the useState hook to manage the search term and filtered data, and the useEffect hook to fetch search suggestions from an API or database.

Possible Future Enhancements

• Add support for more advanced search features, such as faceted search and search filters

• Add support for searching multiple data sources, such as databases and APIs

• Add support for displaying search results in a map or other visualization

• Use a library like React Select for more advanced search suggestion features