Creating a Search Box in React JS | Updated 2024

56

In contemporary web development, integrating a search box is a frequent necessity for diverse applications. React.js, a leading JavaScript library for constructing user interfaces, offers multiple methods to implement a search box efficiently. This comprehensive guide will walk you through the process of building a search box in a React.js application, covering basic input fields, autocomplete functionality, debouncing for performance, integration with external APIs, and customization.

Guiding Steps for Search Box in React JS with Example 

Step 1: Setting Up the Basic Search Input Component

• Create a new React component for the search box.
• Render a simple input field for users to enter search queries.
• Set up state management to store the search query entered by the user.

import React, { useState } from 'react';

function SearchBox() {
  const [query, setQuery] = useState('');

  const handleChange = (event) => {
    setQuery(event.target.value);
  };

  return (
    <input type="text" value={query} onChange={handleChange} placeholder="Search..." />
  );
}

export default SearchBox;

Step 2: Adding Autocomplete Functionality

• Integrate an autocomplete feature using a library like React Autosuggest.
• Configure the autocomplete component to fetch suggestions from an API.
• Implement logic to update the suggestions dynamically as the user types.

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

function SearchBox() {
  const [query, setQuery] = useState('');
  const [suggestions, setSuggestions] = useState([]);

  const getSuggestions = async (value) => {
    // Fetch suggestions from an API based on the input value
    // Update the suggestions state with the fetched data
  };

  const handleChange = (event, { newValue }) => {
    setQuery(newValue);
  };

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

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

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

  const inputProps = {
    placeholder: 'Search...',
    value: query,
    onChange: handleChange
  };

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

export default SearchBox;

Step 3: Implementing Debouncing for Enhanced Performance

• Enhance the search box with debouncing to reduce unnecessary API requests.
• Utilize a debouncing library like Lodash to delay API requests.
• Optimize the debounce delay for responsiveness and performance.

import React, { useState } from 'react';
import { debounce } from 'lodash';

function SearchBox() {
  const [query, setQuery] = useState('');

  // Debounce the handleChange function to delay API requests
  const debouncedHandleChange = debounce((value) => {
    // Fetch suggestions from an API based on the input value
  }, 300); // Adjust the debounce delay as needed (in milliseconds)

  const handleChange = (event) => {
    const { value } = event.target;
    setQuery(value);
    debouncedHandleChange(value);
  };

  return (
    <input type="text" value={query} onChange={handleChange} placeholder="Search..." />
  );
}

export default SearchBox;

Step 4: Integrating with External APIs

• Connect the search box component to external APIs such as Google Places API.
• Implement logic to fetch search results based on the user’s input query.
• Display the retrieved search results in the UI in a user-friendly manner.

import React, { useState } from 'react';
import axios from 'axios';

function SearchBox() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);

  const search = async (value) => {
    try {
      const response = await axios.get(`https://api.example.com/search?q=${value}`);
      setResults(response.data);
    } catch (error) {
      console.error('Error fetching search results:', error);
    }
  };

  const handleChange = (event) => {
    const { value } = event.target;
    setQuery(value);
    search(value);
  };

  return (
    <input type="text" value={query} onChange={handleChange} placeholder="Search..." />
  );
}

export default SearchBox;

Step 5: Styling and Customization

• Customize the appearance of the search box and autocomplete suggestions.
• Utilize CSS frameworks like Bootstrap or Material-UI for pre-designed styling components.
• Implement custom styling using CSS or CSS-in-JS libraries for finer control.

Let’s include the search-box and suggestion-item  classes:

import React from 'react';
import './SearchBox.css';

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

  const handleInputChange = (e) => {
    // Handle input change logic here
  };

  const handleSuggestionClick = (suggestion) => {
    // Handle suggestion click logic here
  };

  return (
    <div className="search-box">
      <input
        type="text"
        placeholder="Search..."
        onChange={handleInputChange}
      />
      <ul className="suggestion-list">
        {suggestions.map((suggestion, index) => (
          <li
            key={index}
            className="suggestion-item"
            onClick={() => handleSuggestionClick(suggestion)}
          >
            {suggestion}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default SearchBox;

/* Example SearchBox.css */
.search-box {
  width: 100%;
}

.suggestion-item {
  padding: 10px;
  cursor: pointer;
}

.suggestion-item:hover {
  background-color: #f0f0f0;
}

How to use pop-up search box in React JS

To implement a pop-up search box in React JS. Here’s a basic example of how to achieve this:

import React, { useState } from 'react';

const PopupSearchBox = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [searchQuery, setSearchQuery] = useState('');

  const togglePopup = () => {
    setIsOpen(!isOpen);
  };

  const handleInputChange = (e) => {
    setSearchQuery(e.target.value);
  };

  const handleSearch = () => {
    // Implement search functionality here
  };

  return (
    <div>
      <button onClick={togglePopup}>
        Open Search
      </button>
      {isOpen && (
        <div>
          <input
            type="text"
            placeholder="Search..."
            value={searchQuery}
            onChange={handleInputChange}
          />
          <button onClick={handleSearch}>Search</button>
          <button onClick={togglePopup}>
            Close
          </button>
        </div>
      )}
    </div>
  );
};

export default PopupSearchBox;

Conclusion

Building a search box in a React.js application involves a series of steps, from setting up basic input fields to implementing advanced features like autocomplete and debouncing. By following the detailed coding steps outlined in this guide, developers can create highly functional search components tailored to their application’s needs. React.js provides the flexibility and tools necessary to implement robust search functionality, empowering developers to deliver seamless user experiences.

Search Box in React JS – FAQs