---
title: Search Input with select menu and avatars
category: Application
paid: false
isActive: false
ltr: {"react":{"jsxCss":[],"jsxTail":[{"code":"import { useEffect, useRef, useState } from \"react\"\n\nexport default () => {\n\n    const menuItems = [\n        {\n            name: \"Danya\",\n            label: \"@danya\",\n            avatar: \"https://randomuser.me/api/portraits/women/79.jpg\"\n        }, {\n            name: \"Osama\",\n            label: \"@osama\",\n            avatar: \"https://api.uifaces.co/our-content/donated/xZ4wg2Xj.jpg\"\n        }, {\n            name: \"Loyan\",\n            label: \"@loyan\",\n            avatar: \"https://randomuser.me/api/portraits/men/86.jpg\"\n        }, {\n            name: \"Carllose\",\n            label: \"@carllose\",\n            avatar: \"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&s=a72ca28288878f8404a795f39642a46f\"\n        }, {\n            name: \"Micheal\",\n            label: \"@micheal\",\n            avatar: \"https://randomuser.me/api/portraits/men/46.jpg\"\n        },\n    ]\n\n    const [selectedItem, setSelectedItem] = useState({\n        item: null,\n        idx: null\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].name.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: null, 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.name)\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 gap-2 px-3 py-2 cursor-default duration-150 text-gray-500 hover:text-indigo-600 hover:bg-indigo-50`}\n                                    >\n                                        <img src={el.avatar} className=\"w-6 h-6 rounded-full\" />\n                                        <div className=\"flex-1 text-left flex items-center gap-x-1\">\n                                            {el.name}<span className=\"text-sm\">{el.label}</span>\n                                        </div>\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}","label":"App.jsx"}]},"html":{"htmlTail":[{"code":"    <div\n      x-data=\"{\n      menuItems: [\n          {\n              name: 'Danya',\n              label: '@danya',\n              avatar: 'https://randomuser.me/api/portraits/women/79.jpg'\n          },\n          {\n              name: 'Osama',\n              label: '@osama',\n              avatar: 'https://api.uifaces.co/our-content/donated/xZ4wg2Xj.jpg'\n          },\n          {\n              name: 'Loyan',\n              label: '@loyan',\n              avatar: 'https://randomuser.me/api/portraits/men/86.jpg'\n          },\n          {\n              name: 'Carllose',\n              label: '@carllose',\n              avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&s=a72ca28288878f8404a795f39642a46f'\n          },\n          {\n              name: 'Micheal',\n              label: '@micheal',\n              avatar: 'https://randomuser.me/api/portraits/men/46.jpg'\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                <img :src=\"el.avatar\" class=\"w-6 h-6 rounded-full\" />\n                <div class=\"flex-1 text-left flex items-center gap-x-1\">\n                  <span x-text=\"el.name\"></span\n                  ><span class=\"text-sm\" x-text=\"el.label\"></span>\n                </div>\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"}]},"preview":"function App() {\n\n    const menuItems = [\n        {\n            name: \"Danya\",\n            label: \"@danya\",\n            avatar: \"https://randomuser.me/api/portraits/women/79.jpg\"\n        }, {\n            name: \"Osama\",\n            label: \"@osama\",\n            avatar: \"https://api.uifaces.co/our-content/donated/xZ4wg2Xj.jpg\"\n        }, {\n            name: \"Loyan\",\n            label: \"@loyan\",\n            avatar: \"https://randomuser.me/api/portraits/men/86.jpg\"\n        }, {\n            name: \"Carllose\",\n            label: \"@carllose\",\n            avatar: \"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&s=a72ca28288878f8404a795f39642a46f\"\n        }, {\n            name: \"Micheal\",\n            label: \"@micheal\",\n            avatar: \"https://randomuser.me/api/portraits/men/46.jpg\"\n        },\n    ]\n\n    const [selectedItem, setSelectedItem] = useState({\n        item: null,\n        idx: null\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].name.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: null, 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.name)\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 gap-2 px-3 py-2 cursor-default duration-150 text-gray-500 hover:text-indigo-600 hover:bg-indigo-50`}\n                                    >\n                                        <img src={el.avatar} className=\"w-6 h-6 rounded-full\" />\n                                        <div className=\"flex-1 text-left flex items-center gap-x-1\">\n                                            {el.name}<span className=\"text-sm\">{el.label}</span>\n                                        </div>\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}","vue":{"vueCss":[],"vueTail":[]}}
slug: /inputs
id: a55ab3dc-c418-4ed2-8265-97bcab681cbc
created_at: 1668382041073
---

<FUISearchInputWithSelectMenuAndAvatars />