NextJS, add Auto Suggest component to input field

[Fred638]

🏷️ Discussion Type

Question

Body

Hi,
I have created an Auto-Suggest component that works as expected. There are no issues when importing and using the component on the target page. However, I need to add this functionality to an input field. Does the Auto-Suggest need to be inside the input field?

Guidelines

• I have read and understood this category's guidelines before making this post.

[nirav-gajera]

Hi @Fred638 ,
No, the auto-suggest component doesn't need to be literally inside the <input> HTML element — it can't be, actually. But they need to be grouped together in a container and wired together via shared state.

The pattern is:

<div className="autosuggest-container">
  <input 
    value={searchTerm}
    onChange={(e) => setSearchTerm(e.target.value)}
    onFocus={() => setShowSuggestions(true)}
  />
  {showSuggestions && (
    <AutoSuggestComponent 
      suggestions={filteredSuggestions}
      onSelect={handleSelect}
    />
  )}
</div>

Key points:

1. Container wraps both — the input and suggestions component sit side-by-side inside a parent <div>, not nested inside the input itself.

2. Shared state — they communicate via:

   • searchTerm state in the parent (updated by input's onChange)
   • showSuggestions state (show/hide the dropdown)
   • Callback from suggestions back to parent (onSelect)

3. Positioning — use CSS to position the suggestions dropdown visually below the input:

   .autosuggest-container {
     position: relative;
   }
   .suggestions-list {
     position: absolute;
     top: 100%;
     left: 0;
     width: 100%;
     /* ... */
   }

Full example:

import { useState } from 'react';
import AutoSuggest from '@/components/AutoSuggest';

export default function SearchInput() {
  const [searchTerm, setSearchTerm] = useState('');
  const [showSuggestions, setShowSuggestions] = useState(false);
  
  const suggestions = ['Apple', 'Apricot', 'Avocado'].filter(s =>
    s.toLowerCase().includes(searchTerm.toLowerCase())
  );

  return (
    <div className="autosuggest-container">
      <input
        type="text"
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        onFocus={() => setShowSuggestions(true)}
        onBlur={() => setTimeout(() => setShowSuggestions(false), 100)}
        placeholder="Search..."
      />
      {showSuggestions && suggestions.length > 0 && (
        <AutoSuggest
          suggestions={suggestions}
          onSelect={(selected) => {
            setSearchTerm(selected);
            setShowSuggestions(false);
          }}
        />
      )}
    </div>
  );
}

Notes:

• The onBlur with setTimeout closes the dropdown when you click away (common UX pattern)
• The AutoSuggest component receives data it needs (suggestions, onSelect) as props
• The styling makes it appear below the input visually, even though the DOM has them as siblings

So: they're siblings in the DOM, positioned together with CSS, and connected via state/callbacks in React. That's the standard pattern.

[Fred638]

Thanks! Just for better understanding. The list of suggestions is stored as an xml file and called via api in the Auto-Suggest client component.

[sunmeat]

No, the Auto-Suggest dropdown/list component does not need to be physically rendered inside the element. In HTML/DOM structure, an element cannot contain child elements anyway, so they must be sibling elements or separate containers tied together via layout and ARIA attributes.

To make an Auto-Suggest component work correctly alongside an input field, follow these best practices:

1. DOM Structure & Positioning
   Place the and your Auto-Suggest dropdown inside a shared container with position: relative.

Position the Auto-Suggest list using position: absolute directly below the input field.

Alternatively, render the suggestion list at the document root via a Portal or Floating UI library to prevent issues with overflow: hidden on parent containers.

2. Accessibility (ARIA)
   To link the input and auto-suggest list for screen readers and keyboard navigation, use standard ARIA roles:

Set role="combobox" and aria-autocomplete="list" on the .

Set aria-expanded="true/false" on the input depending on whether suggestions are visible.

Set role="listbox" on the suggestion container and role="option" on each suggestion item.

Link them using aria-controls="suggestion-list-id" on the input and update aria-activedescendant as the user navigates through suggestions with arrow keys.

3. Event Handling
   Focus & Blur: Show the suggestion box when the input receives focus or receives text, and hide it on blur or when pressing Escape.

Click Outside: Close the suggestions when a user clicks anywhere outside the input/dropdown container.