// "use client"; // import { usePathname, useRouter, useSearchParams } from "next/navigation"; // import { useDebouncedCallback } from "use-debounce"; // export function Search() { // const searchParams = useSearchParams(); // const { replace } = useRouter(); // const pathname = usePathname(); // const handleSearch = useDebouncedCallback((term: string) => { // console.log(`Searching... ${term}`); // const params = new URLSearchParams(searchParams); // params.set("page", "1"); // if (term) { // params.set("query", term); // } else { // params.delete("query"); // } // replace(`search?${params.toString()}`); // }, 300); // return ( //
// handleSearch(e.target.value)} // defaultValue={searchParams.get("query")?.toString()} // /> //
// ); // } import Head from "next/head" import Image from "next/image" import Link from "next/link" import { formatDate } from "../../utils" import { DrupalNode } from "next-drupal" import React from "react" export default function Search() { const [status, setStatus] = React.useState<"error" | "success" | "loading">() const [results, setResults] = React.useState([]) async function handleSubmit(event: { preventDefault: () => void; target: { keywords: { value: any } } }) { event.preventDefault() setStatus("loading") const response = await fetch("/api/search/default_index", { method: "POST", body: JSON.stringify({ params: { fields: { "node--article": "id,title,created,field_image", }, include: "field_image", filter: { fulltext: event.target.keywords.value, }, }, }), }) if (!response.ok) { return setStatus("error") } setStatus("success") const results = await response.json() setResults(results) } return ( <> Next.js for Drupal | Search API Example

Next.js for Drupal

Search API Example - Simple

A simple full text search implemented using Search API and JSON:API Search API.

Use the form below to search for article nodes.

{status === "error" ? (
An error occured. Please try again.
) : null} {!results.length ? (

No results found. Try searching for static or{" "} preview.

) : (

Found {results.length} result(s).

{results.map((node) => (
{node.field_image?.uri && (
{/* */}
)}

{node.title}

{formatDate(node.created)}

))}
)}

Go back

) }