Build a UK company autocomplete for signup forms in Next.js
Use Entylink search results to build a company autocomplete in Next.js, then capture the selected company number for downstream onboarding, verification, and monitoring workflows.
Start from the real implementation problem
Keep the setup explicit
A Next.js app
An internal API route or server action that can call Entylink
An Entylink API key stored server-side
Create a server-side search route
Keep the Entylink key on the server. The browser should call your own route, which forwards validated search terms to Entylink.
import { NextResponse } from "next/server";
export async function GET(request: Request) {
const { searchParams } = new URL(request.url);
const q = (searchParams.get("q") || "").trim();
if (!q) return NextResponse.json({ items: [] });
const response = await fetch(
`https://api.entylink.com/v1/search?q=${encodeURIComponent(q)}&items_per_page=8`,
{
headers: {
Authorization: `Bearer ${process.env.ENTYLINK_KEY}`,
},
},
);
const payload = await response.json();
return NextResponse.json({ items: payload.data.items });
}Debounce input on the client
Do not call the API on every keystroke with no guardrails. Debouncing keeps the UX responsive and the request pattern sane.
const [query, setQuery] = useState("");
const [items, setItems] = useState([]);
useEffect(() => {
if (query.trim().length < 2) {
setItems([]);
return;
}
const timeout = setTimeout(async () => {
const response = await fetch(`/api/company-search?q=${encodeURIComponent(query)}`);
const payload = await response.json();
setItems(payload.items);
}, 250);
return () => clearTimeout(timeout);
}, [query]);Persist the company number after selection
The visible label is not enough. Store the chosen company number in form state so later steps can call `/v1/company/:number` and related endpoints reliably.
function selectCompany(item: {
company_number: string;
company_name: string;
}) {
setValue("companyNumber", item.company_number);
setValue("companyName", item.company_name);
setItems([]);
}Treat autocomplete as onboarding infrastructure
The commercial value of autocomplete is not just a nicer field. It reduces resolution errors and creates a clean handoff into verification and monitoring workflows.