Search implementation in Remix

Introduction

Search helps users find what they want quickly by typing keywords. It makes websites easier and faster to use.

You have a list of items and want users to find one quickly.

Your website has many pages or products and users need to search by name or description.

You want to filter content dynamically based on user input.

You want to improve user experience by adding a search bar.

You want to show search results without reloading the whole page.

Syntax

Remix

import { json } from '@remix-run/node';
import { useLoaderData } from '@remix-run/react';

export async function loader({ request }) {
  const url = new URL(request.url);
  const searchTerm = url.searchParams.get('q') || '';
  const results = searchTerm ? searchItems(searchTerm) : [];
  return json({ results });
}

export default function Search() {
  const { results } = useLoaderData();
  return (
    <main>
      <form method="get">
        <input type="search" name="q" aria-label="Search items" placeholder="Search..." />
        <button type="submit">Search</button>
      </form>
      <ul>
        {results.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </main>
  );
}

function searchItems(term) {
  const data = [
    { id: 1, name: 'Apple' },
    { id: 2, name: 'Banana' },
    { id: 3, name: 'Cherry' }
  ];
  return data.filter(item => item.name.toLowerCase().includes(term.toLowerCase()));
}

The loader function runs on the server to get search results based on the query.

The search term is read from the URL query parameter q.

Examples

This gets the search term from the URL and calls a search function only if the term exists.

Remix

const searchTerm = url.searchParams.get('q') || '';
const results = searchTerm ? searchItems(searchTerm) : [];

A simple search form that sends the query as a URL parameter when submitted.

Remix

<form method="get">
  <input type="search" name="q" aria-label="Search items" placeholder="Search..." />
  <button type="submit">Search</button>
</form>

Displays the search results as a list of item names.

Remix

return (
  <ul>
    {results.map(item => (
      <li key={item.id}>{item.name}</li>
    ))}
  </ul>
);

Sample Program

This Remix component shows a search box for fruits. When you type a word and submit, it shows matching fruits from a small list. If nothing matches, it says "No results found." The search runs on the server and updates the page with results.

Remix

import { json } from '@remix-run/node';
import { useLoaderData } from '@remix-run/react';

export async function loader({ request }) {
  const url = new URL(request.url);
  const searchTerm = url.searchParams.get('q') || '';
  const results = searchTerm ? searchItems(searchTerm) : [];
  return json({ results });
}

export default function Search() {
  const { results } = useLoaderData();
  return (
    <main>
      <h1>Search Fruits</h1>
      <form method="get">
        <input
          type="search"
          name="q"
          aria-label="Search fruits"
          placeholder="Type to search..."
          defaultValue=""
        />
        <button type="submit">Search</button>
      </form>
      <ul>
        {results.length > 0 ? (
          results.map(item => <li key={item.id}>{item.name}</li>)
        ) : (
          <li>No results found</li>
        )}
      </ul>
    </main>
  );
}

function searchItems(term) {
  const data = [
    { id: 1, name: 'Apple' },
    { id: 2, name: 'Banana' },
    { id: 3, name: 'Cherry' },
    { id: 4, name: 'Date' },
    { id: 5, name: 'Elderberry' }
  ];
  return data.filter(item => item.name.toLowerCase().includes(term.toLowerCase()));
}

Important Notes

Use method="get" in the form to send search queries as URL parameters, which Remix can read in the loader.

Always add aria-label to the search input for accessibility.

Remember to handle the case when no results are found to improve user experience.

Summary

Search implementation in Remix uses the loader to get query parameters and return filtered data.

The search form uses GET method so the query appears in the URL and triggers the loader.

Results are displayed dynamically based on the search term, improving user navigation.