title: react headless ui combox autocomplete, how to search by enter key
body: <p>i am using this headless ui combobox <a href="https://headlessui.dev/react/combobox" rel="nofollow noreferrer">https://headlessui.dev/react/combobox</a></p>
  <p>for my own auto complete search box suggestion. For this case i am wondering, how can i make the combobox to send the values when i press the enter key? currently i have ways to send the value with onclick on the suggested options but i would like to have something for enter key as well</p>
  <pre><code>&lt;&gt;
    &lt;Combobox
      as=&quot;div&quot;
      className=&quot;relative mb-10 mx-auto max-w-x1 rounded-x1 bg-white shadow-2x1 ring-1 ring-black/5 divide-y divide-gray-100 overflow-hidden&quot;
      value={searchCardName}
      onChange={setSearchCardName}
    &gt;
      &lt;div className=&quot;flex items-center px-4&quot;&gt;
        &lt;SearchIcon className=&quot;h-6 w-6 text-gray-500&quot; /&gt;
        &lt;Combobox.Input
          className=&quot;h-12 w-full border-0 focus:ring-0&quot;
          placeholder=&quot;Search...&quot;
          onChange={(event) =&gt; onChangeHandler(event.target.value)}
        /&gt;
      &lt;/div&gt;
      &lt;Combobox.Options className=&quot;max-h-96 py-4 text-sm overflow-y-auto&quot;&gt;
        {suggestions.map((cardName) =&gt; (
          &lt;Combobox.Option key={cardName} value={cardName}&gt;
            {({ active }) =&gt; (
              &lt;div
                className={`space-x-1 px-4 py-2 ${
                  active ? &quot;bg-indigo-600&quot; : &quot;bg-white&quot;
                }`}
                onClick={() =&gt; onSuggestHandler(cardName)}
              &gt;
                &lt;span
                  className={`font-medium text-gray-900 ${
                    active ? &quot;text-white&quot; : &quot;text-gray-900&quot;
                  }`}
                &gt;
                  {cardName}
                &lt;/span&gt;
              &lt;/div&gt;
            )}
          &lt;/Combobox.Option&gt;
        ))}
      &lt;/Combobox.Options&gt;
    &lt;/Combobox&gt;
    {isResult &amp;&amp; &lt;Tabs /&gt;}
  &lt;/&gt;;
  
  </code></pre>
  <p>edit for updated, tried onKeyDown with this</p>
  <pre><code> &lt;&gt;
                  &lt;Combobox as=&quot;div&quot; className=&quot;relative mb-10 mx-auto max-w-x1 rounded-x1 bg-white shadow-2x1 ring-1 ring-black/5 divide-y divide-gray-100 overflow-hidden&quot; value={searchCardName} onChange={setSearchCardName}&gt;
                    &lt;div className=&quot;flex items-center px-4&quot;&gt;
                          &lt;SearchIcon className=&quot;h-6 w-6 text-gray-500&quot; /&gt;
                          &lt;Combobox.Input className=&quot;h-12 w-full border-0 focus:ring-0&quot; placeholder=&quot;Search...&quot; onChange={(event) =&gt; onChangeHandler(event.target.value)} onKeyPress={(e) =&gt; e.key === 'Enter' &amp;&amp; console.log(&quot;testing&quot;)}/&gt;
                    &lt;/div&gt;
                          &lt;Combobox.Options className=&quot;max-h-96 py-4 text-sm overflow-y-auto&quot;&gt;
                            {suggestions.map((cardName) =&gt; (
                              &lt;Combobox.Option key={cardName} value={cardName}&gt;
                                {({ active }) =&gt; (
                                  &lt;div className={`space-x-1 px-4 py-2 ${active ? 'bg-indigo-600' : 'bg-white'}`} onClick={() =&gt; onSuggestHandler(cardName)}&gt;
                                    &lt;span className={`font-medium text-gray-900 ${active ? 'text-white' : 'text-gray-900'}`}&gt;{cardName}&lt;/span&gt;
                                  &lt;/div&gt;
                                )}
                               
                              &lt;/Combobox.Option&gt;
                            ))}
                          &lt;/Combobox.Options&gt;
                  &lt;/Combobox&gt;
                  {isResult &amp;&amp; 
                  &lt;Tabs /&gt;}
              &lt;/&gt;
  </code></pre>
  <p>the onKeyDown is under my Combobox.Input</p>
  <pre><code>&lt;Combobox.Input className=&quot;h-12 w-full border-0 focus:ring-0&quot; placeholder=&quot;Search...&quot; onChange={(event) =&gt; onChangeHandler(event.target.value)} onKeyPress={(e) =&gt; e.key === 'Enter' &amp;&amp; console.log(&quot;testing&quot;)}/&gt;
  </code></pre>