Part 82: Enhancing Search Functionality with Dynamic Filtering in React

[App] Client-Side Data Fetching

[App] Client-Side Data Fetching

Creating an efficient search experience is crucial for web applications that aim to provide users with quick access to the information they need. In this post, we'll enhance our existing SearchBox component by implementing dynamic filtering based on user input. This will allow us to display only relevant search options as users type, ensuring a more intuitive and efficient search process.

Step 1: Capturing User Input

To dynamically filter search options, we first need to capture what the user is typing. We'll achieve this using React's useState hook to create a state variable called query.

Setting Up State Management

import { useState } from 'react';

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

Here, query holds the current input value, and setQuery is a function to update it. We initialize query with an empty string.

Binding State to the Input Field

Next, we bind the query variable to the input field. This ensures that the input field's value reflects our state.

<Combobox.Input 
  placeholder="Search…"
  value={query}
  onChange={(event) => setQuery(event.target.value)}
  className="border px-2 py-1 rounded w-full"
/>

The onChange event updates query with the current input value, allowing us to track what the user types.

Step 2: Filtering Options

With user input captured, we can filter the list of reviews to display only those that match the query.

Implementing the Filter Logic

We'll use the filter method on our reviews array to create a new array of reviews whose titles include the user's query.

const filtered = reviews.filter((review) => review.title.includes(query));

This simple line of code dynamically filters reviews based on the current query. The includes method checks if the review title contains the query string.

Step 3: Displaying Filtered Options

Now that we have a list of filtered reviews, we need to display them instead of all available options.

<Combobox.Options className="absolute bg-white py-1 w-full">
  {filtered.map((review) => (
    <Combobox.Option key={review.slug} value={review}>
      {({ active }) => (
        <span className={`block px-2 truncate w-full ${active ? 'bg-orange-100' : ''}`}>
          {review.title}
        </span>
      )}
    </Combobox.Option>
  ))}
</Combobox.Options>

This code iterates over filtered reviews, displaying each one as an option in the dropdown.

Step 4: Navigating to Selected Review

We want to navigate to the corresponding review page when a user selects an option. The Combobox component provides an onChange event for this purpose.

Handling Selection

We'll define a handleChange function to manage navigation:

import { useRouter } from 'next/navigation';

export default function SearchBox() {
    {/* Input and Options here */}
    const router = useRouter();

    const handleChange = (review) => {
      router.push(`/reviews/${review.slug}`);
    };

 if (!isClient) {
        return null;
    }
    const filtered = reviews.filter((review) => review.title.includes(query));
    console.log('[SearchBox] filtered:', filtered);
    return (

The handleChange function uses Next.js's router to navigate to the selected review's page.

Integrating Navigation with the Combobox

<Combobox onChange={handleChange}>
  {/* Input and Options here */}
</Combobox>

By setting the Combobox's onChange to handleChange, we ensure that selecting an option triggers navigation to the correct review page.

Conclusion

With these enhancements, our SearchBox now provides a responsive and user-friendly search experience. Users can type to filter options in real time and select a review to navigate directly to its page. This implementation not only improves usability but also sets the stage for further enhancements, such as case-insensitive search or fetching data from a backend. Stay tuned for more advancements as we continue to refine our search functionality!