{"id":489,"date":"2025-02-03T16:06:02","date_gmt":"2025-02-03T16:06:02","guid":{"rendered":"https:\/\/theuistudio.com\/blog\/?p=489"},"modified":"2025-02-21T09:56:15","modified_gmt":"2025-02-21T09:56:15","slug":"creating-a-minimal-ui-ux-searchable-dropdown-with-livewire-html-and-css","status":"publish","type":"post","link":"https:\/\/theuistudio.com\/blog\/creating-a-minimal-ui-ux-searchable-dropdown-with-livewire-html-and-css\/","title":{"rendered":"A Guide to Creating a Minimal UI\/UX Searchable Dropdown with Livewire, HTML, and CSS"},"content":{"rendered":"\n

Tired of boring, conventional dropdowns? Are your clients asking for live search or searchable dropdowns instead \ud83d\udd0d?<\/strong>
We recently tackled this challenge for a client and thought it was worth sharing (developing a searchable dropdown with Livewire). At The UI Studio<\/a>, one of our core goals is to enhance user experience in every way possible. This means going beyond visually appealing front-end designs<\/em> and treating UX with the same importance as UI. Sometimes, that even requires optimizing back-end logic to deliver a seamless experience. In this blog, we\u2019ll walk you through a real-world use case, the limitations of the old approach, and the new solution our client loved \ud83d\ude0d. If a Figma expert has provided you with a searchable dropdown UI and you’re a Laravel\/Livewire developer looking to upgrade standard dropdowns into user-friendly, searchable lists, this guide is for you!<\/p>\n\n\n\n

\"searchable<\/figure>\n\n\n\n
Table of Contents<\/div>
<\/span><\/span><\/span><\/span><\/div><\/div>
<\/div>
    <\/ol><\/div><\/div><\/div>\n\n\n\n

    Elevating UX by Searchable Dropdown with Livewire<\/h2>\n\n\n\n

    Searchable dropdowns significantly improve the user experience. Imagine you need to select a landlord from a long list scrolling endlessly up and down just to find the one you need. Feels frustrating, right? \ud83d\ude2b Let’s face it: it’s a hassle!<\/p>\n\n\n\n

    Understanding the Use-Case Where We Needed a Searchable Dropdown<\/h3>\n\n\n\n

    Our developers were working on a Tenant Management System where the “Properties” module required linking each property to its corresponding landlord. Admins would need to select a landlord from the “Landlord” module, where each landlord had a unique code and details.<\/p>\n\n\n\n

    Old Approach for the Dropdown<\/h4>\n\n\n\n

    Take a look at the image below. This was the old dropdown approach. Our UI\/UX team wasn\u2019t a fan either, but we only planned to change it after the client gave us the green light. The client was happy with the old approach, but we were already anticipating limitations as the list of landlords continued to grow. \ud83e\udd14<\/p>\n\n\n\n

    \"conventional<\/figure>\n\n\n\n

    Old Backend and UI Code for the Dropdown in Livewire<\/h4>\n\n\n\n

    Let\u2019s take a look at the old code behind the conventional dropdown.<\/p>\n\n\n\n

    In Livewire class:<\/p>\n\n\n\n

    \/\/ Define a public property to hold the list of landlords\npublic $landlords;\n\n\/\/ Method to retrieve landlords\npublic function landlords()\n{\n    \/\/ Check if the landlords property is empty\n    if (empty($this->landlords)) \n    {\n        \/\/ fetch all landlords from the database and assign to the property\n        $this->landlords = Landlord::all();\n    }\n    \/\/ The landlords property will now contain all landlords from the database\n}<\/code><\/pre>\n\n\n\n
    On client side:<\/p>\n\n\n\n
    <div class=\"mb-4 row align-items-center\">\n    <label class=\"form-label col-sm-3 col-form-label\">Select Landlord<\/label>\n    <div class=\"col-sm-9\">\n        <select wire:model.defer=\"landlord_id\" class=\"form-control\">\n            <option value=\"\">Select<\/option>\n            @foreach($landlords as $landlord)\n                <option value=\"{{ $landlord->id }}\">\n                    {{ $landlord->full_name }} ({{ $landlord->code}})\n                <\/option>\n            @endforeach\n        <\/select>\n    <\/div>\n<\/div><\/code><\/pre>\n\n\n\n
    Leveraging Livewire to Transform Conventional Dropdowns into Searchable Dropdown\/Lists<\/strong><\/h4>\n\n\n\n
    After receiving the client\u2019s request to transform the dropdown into a searchable dropdown or list, we were excited to dive into the solution. Since the project was built using Laravel, Livewire, MySQL for the backend, and Bootstrap\/HTML\/CSS for the front end<\/a>, our Livewire experts quickly devised a plan. The solution didn\u2019t just allow searching landlords by name; it also enabled filtering by their unique IDs<\/strong>. Looking for a way to implement multi-table searchable dropdown lists in Livewire? Take a look at this multi-table searchable dropdown<\/a> article. <\/p>\n\n\n\n
    Searchable Dropdown with Livewire: Features<\/h5>\n\n\n\n