---
title: Search input with select menu
category: Application
paid: false
isActive: false
ltr: {"html":{"htmlTail":[{"code":"<div\n  x-data=\"{\n  menuItems: [\n      {\n          name: 'Products',\n      },\n      {\n          name: 'Documentation',\n      },\n      {\n          name: 'Features',\n      },\n      {\n          name: 'Partners',\n      },\n      {\n          name: 'Industry',\n      },\n      {\n        name: 'Feedback',\n    },\n    {\n      name: 'Tech stack',\n  },\n  ],\n  searchFieldVal: '',\n  state: false,\n  selectedItem: { item: null, idx: null },\n  handleSearch: function(e) {\n      const searchVal = e.target.value.toLocaleLowerCase();\n      const alrtEl = document.getElementById('li-alert');\n      this.searchFieldVal = e.target.value;\n      const handleAlert = () => {\n          if (this.menuItems.filter(item => item.name.toLocaleLowerCase().includes(searchVal)).length == 0) alrtEl.classList.remove('hidden');\n          else alrtEl.classList.add('hidden');\n      };\n      handleAlert();\n      setTimeout(() => handleAlert(), 100);\n  }\n}\"\n  class=\"relative max-w-xs px-4 text-base\"\n>\n  <div\n    @click.away=\"state = false\"\n    class=\"label-button flex items-center gap-1 px-2 border rounded-lg shadow-sm\"\n  >\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      class=\"w-6 h-6 text-gray-400\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      stroke=\"currentColor\"\n    >\n      <path\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        strokeWidth=\"2\"\n        d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\"\n      />\n    </svg>\n    <input\n      type=\"text\"\n      placeholder=\"Type to search\"\n      class=\"w-full px-2 py-2 text-gray-500 bg-transparent rounded-md outline-none\"\n      x-model=\"searchFieldVal\"\n      @input=\"handleSearch\"\n      @focus=\"state = true\"\n    />\n    <template x-if=\"searchFieldVal\">\n      <button\n        @click=\"searchFieldVal = ''; selectedItem = { item: null, idx: null }; state = false;\"\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 20 20\"\n          fill=\"currentColor\"\n          class=\"w-5 h-5 text-gray-400\"\n        >\n          <path\n            d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\"\n          />\n        </svg>\n      </button>\n    </template>\n    <template x-if=\"!searchFieldVal\">\n      <button @click=\"state = !state\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 20 20\"\n          fill=\"currentColor\"\n          class=\"w-5 h-5 text-gray-400\"\n        >\n          <path\n            fillRule=\"evenodd\"\n            d=\"M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z\"\n            clipRule=\"evenodd\"\n          />\n        </svg>\n      </button>\n    </template>\n  </div>\n  <template x-if=\"state\">\n    <div class=\"relative w-full\">\n      <ul\n        class=\"absolute w-full mt-3 overflow-y-auto bg-white border rounded-md shadow-sm max-h-64\"\n        role=\"listbox\"\n      >\n        <li\n          id=\"li-alert\"\n          class=\"hidden px-3 py-2 text-center text-gray-600\"\n        >\n          Not results available\n        </li>\n        <template x-for=\"(el, idx) in menuItems\" :key=\"idx\">\n          <li\n            @click=\"selectedItem = { item: el, idx }; searchFieldVal = el.name; state = false;\"\n            :aria-selected=\"selectedItem.idx == idx ? true : false\"\n            :class=\"`${selectedItem.idx == idx ? 'text-indigo-600 bg-indigo-50' : ''} menu-el-js flex items-center justify-between gap-2 px-3 py-2 cursor-default duration-150 text-gray-500 hover:text-indigo-600 hover:bg-indigo-50`\"\n            x-on:click=\"state = false\"\n          >\n            <span x-text=\"el.name\"></span>\n            <template x-if=\"selectedItem.idx == idx\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                class=\"w-5 h-5 text-indigo-600\"\n                viewBox=\"0 0 20 20\"\n                fill=\"currentColor\"\n              >\n                <path\n                  fillRule=\"evenodd\"\n                  d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\"\n                  clipRule=\"evenodd\"\n                />\n              </svg>\n            </template>\n          </li>\n        </template>\n      </ul>\n    </div>\n  </template>\n</div>","label":"index.html"}]},"react":{"jsxTail":[{"label":"App.jsx","code":"import { useEffect, useRef, useState } from \"react\"\n\nexport default () => {\n\n    const menuItems = [\"Products\", \"Documentation\", \"Features\", \"Partners\", \"Industry\", \"Feedback\", \"Tech stack\"]\n\n    const [selectedItem, setSelectedItem] = useState({\n        item: null,\n        idx: null\n    })\n\n    const [state, setState] = useState(false)\n    const [searchFieldVal, setSearchFieldVal] = useState(\"\")\n\n    const listboxRef = useRef()\n\n    const handleSearch = (e) => {\n        const menuEls = document.querySelectorAll('.menu-el-js')\n        const searchVal = e.target.value.toLocaleLowerCase()\n        const alrtEl = document.getElementById(\"li-alert\")\n        setSearchFieldVal(e.target.value)\n        const handleAlert = () => {\n            if (listboxRef.current && listboxRef.current.offsetHeight < 5) alrtEl.classList.remove(\"hidden\")\n            else alrtEl.classList.add(\"hidden\")\n        }\n        handleAlert()\n        setTimeout(() => handleAlert(), 100)\n\n        menuEls.forEach((el, idx) => {\n            el.classList.remove(\"hidden\")\n            if (!menuItems[idx].toLocaleLowerCase().includes(searchVal)) {\n                el.classList.add(\"hidden\")\n            }\n        })\n    }\n\n    useEffect(() => {\n        document.onclick = (e) => {\n            const target = e.target;\n            if (!target.closest(\".label-button\")) setState(false)\n        };\n    }, [])\n\n    return (\n        <div className=\"relative max-w-xs px-4 text-base\">\n\n            <div className=\"label-button flex items-center gap-1 px-2 border rounded-lg shadow-sm\"\n            >\n                <svg xmlns=\"http://www.w3.org/2000/svg\" className=\"w-6 h-6 text-gray-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\" />\n                </svg>\n                <input\n                    type=\"text\"\n                    placeholder=\"Type to search\"\n                    className=\"w-full px-2 py-2 text-gray-500 bg-transparent rounded-md outline-none\"\n                    value={searchFieldVal}\n                    onChange={handleSearch}\n                    onFocus={() => setState(true)}\n                />\n                {\n                    searchFieldVal ? (\n                        <button\n                            onClick={() => {\n                                setSearchFieldVal(\"\")\n                                setSelectedItem({ item: \"\", idx: null })\n                                setState(false)\n                            }}\n                        >\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" className=\"w-5 h-5 text-gray-400\">\n                                <path d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\" />\n                            </svg>\n\n                        </button>\n                    ) : (\n                        <button\n                            onClick={() => setState(!state)}\n                        >\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" className=\"w-5 h-5 text-gray-400\">\n                                <path fillRule=\"evenodd\" d=\"M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z\" clipRule=\"evenodd\" />\n                            </svg>\n                        </button>\n\n                    )\n                }\n            </div>\n\n            {\n                state ? (\n                    <div className=\"relative w-full\">\n                        <ul ref={listboxRef} className=\"absolute w-full mt-3 overflow-y-auto bg-white border rounded-md shadow-sm max-h-64\" role=\"listbox\">\n                            <li id=\"li-alert\" className=\"hidden px-3 py-2 text-center text-gray-600\">Not results available</li>\n                            {\n                                menuItems.map((el, idx) => (\n                                    <li\n                                        key={idx}\n                                        onClick={() => {\n                                            setSelectedItem({ item: el, idx })\n                                            setSearchFieldVal(el)\n                                        }}\n                                        role=\"option\"\n                                        aria-selected={selectedItem.idx == idx ? true : false}\n                                        className={`${selectedItem.idx == idx ? 'text-indigo-600 bg-indigo-50' : ''} menu-el-js flex items-center justify-between px-3 py-2 cursor-default duration-150 text-gray-500 hover:text-indigo-600 hover:bg-indigo-50`}\n                                    >\n                                        {el}\n                                        {\n                                            selectedItem.idx == idx ? (\n                                                <svg xmlns=\"http://www.w3.org/2000/svg\" className=\"w-5 h-5 text-indigo-600\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                                                    <path fillRule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clipRule=\"evenodd\" />\n                                                </svg>\n                                            ) : ''\n                                        }\n                                    </li>\n                                ))\n                            }\n                        </ul>\n                    </div>\n                ) : ''\n            }\n        </div>\n    )\n}"}],"jsxCss":[]},"vue":{"vueTail":[],"vueCss":[]},"preview":"function App() {\n\n    const menuItems = [\"Products\", \"Documentation\", \"Features\", \"Partners\", \"Industry\", \"Feedback\", \"Tech stack\"]\n\n    const [selectedItem, setSelectedItem] = useState({\n        item: null,\n        idx: null\n    })\n\n    const [state, setState] = useState(false)\n    const [searchFieldVal, setSearchFieldVal] = useState(\"\")\n\n    const listboxRef = useRef()\n\n    const handleSearch = (e) => {\n        const menuEls = document.querySelectorAll('.menu-el-js')\n        const searchVal = e.target.value.toLocaleLowerCase()\n        const alrtEl = document.getElementById(\"li-alert\")\n        setSearchFieldVal(e.target.value)\n        const handleAlert = () => {\n            if (listboxRef.current && listboxRef.current.offsetHeight < 5) alrtEl.classList.remove(\"hidden\")\n            else alrtEl.classList.add(\"hidden\")\n        }\n        handleAlert()\n        setTimeout(() => handleAlert(), 100)\n\n        menuEls.forEach((el, idx) => {\n            el.classList.remove(\"hidden\")\n            if (!menuItems[idx].toLocaleLowerCase().includes(searchVal)) {\n                el.classList.add(\"hidden\")\n            }\n        })\n    }\n\n    useEffect(() => {\n        document.onclick = (e) => {\n            const target = e.target;\n            if (!target.closest(\".label-button\")) setState(false)\n        };\n    }, [])\n\n    return (\n        <div className=\"relative max-w-xs px-4 mx-auto mt-12 text-base\">\n\n            <div className=\"label-button flex items-center gap-1 px-2 border rounded-lg shadow-sm\"\n            >\n                <svg xmlns=\"http://www.w3.org/2000/svg\" className=\"w-6 h-6 text-gray-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\" />\n                </svg>\n                <input\n                    type=\"text\"\n                    placeholder=\"Type to search\"\n                    className=\"w-full px-2 py-2 text-gray-500 bg-transparent rounded-md outline-none\"\n                    value={searchFieldVal}\n                    onChange={handleSearch}\n                    onFocus={() => setState(true)}\n                />\n                {\n                    searchFieldVal ? (\n                        <button\n                            onClick={() => {\n                                setSearchFieldVal(\"\")\n                                setSelectedItem({ item: \"\", idx: null })\n                                setState(false)\n                            }}\n                        >\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" className=\"w-5 h-5 text-gray-400\">\n                                <path d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\" />\n                            </svg>\n\n                        </button>\n                    ) : (\n                        <button\n                            onClick={() => setState(!state)}\n                        >\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" className=\"w-5 h-5 text-gray-400\">\n                                <path fillRule=\"evenodd\" d=\"M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z\" clipRule=\"evenodd\" />\n                            </svg>\n                        </button>\n\n                    )\n                }\n            </div>\n\n            {\n                state ? (\n                    <div className=\"relative w-full\">\n                        <ul ref={listboxRef} className=\"absolute w-full mt-3 overflow-y-auto bg-white border rounded-md shadow-sm max-h-64\" role=\"listbox\">\n                            <li id=\"li-alert\" className=\"hidden px-3 py-2 text-center text-gray-600\">Not results available</li>\n                            {\n                                menuItems.map((el, idx) => (\n                                    <li\n                                        key={idx}\n                                        onClick={() => {\n                                            setSelectedItem({ item: el, idx })\n                                            setSearchFieldVal(el)\n                                        }}\n                                        role=\"option\"\n                                        aria-selected={selectedItem.idx == idx ? true : false}\n                                        className={`${selectedItem.idx == idx ? 'text-indigo-600 bg-indigo-50' : ''} menu-el-js flex items-center justify-between px-3 py-2 cursor-default duration-150 text-gray-500 hover:text-indigo-600 hover:bg-indigo-50`}\n                                    >\n                                        {el}\n                                        {\n                                            selectedItem.idx == idx ? (\n                                                <svg xmlns=\"http://www.w3.org/2000/svg\" className=\"w-5 h-5 text-indigo-600\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                                                    <path fillRule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clipRule=\"evenodd\" />\n                                                </svg>\n                                            ) : ''\n                                        }\n                                    </li>\n                                ))\n                            }\n                        </ul>\n                    </div>\n                ) : ''\n            }\n        </div>\n    )\n}"}
slug: /inputs
id: bc8bcd19-435f-49bd-8b6e-a3ba8df65622
created_at: 1668381867813
---

<FUISearchInputWithSelectMenu />