Home
Michael Andreuzza
Search input with Tailwind CSS and Alpinejs

Search input with Tailwind CSS and Alpinejs

How to create a search input with Tailwind CSS and Alpinejs

This tailwind example is contributed by Michael Andreuzza, on 09-May-2024. Component is made with Tailwind CSS v3. It is responsive.

Input

Author Michael Andreuzza

1.9k

Fork Fullscreen

<section class="bg-white relative overflow-hidden" x-data="{ isOpen: false }">
 <div class="w-full mx-auto 2xl:max-w-7xl flex flex-col justify-center py-24 relative p-8">
  <div class="prose text-gray-500 prose-sm prose-headings:font-normal prose-headings:text-xl mx-auto max-w-sm w-full">
   <div>
    <h1>Simple search</h1>
    <p class="text-balance">Search for the words you are looking for.</p>
   </div>
  </div>
  <div class="mt-6 border-t pt-12 max-w-sm mx-auto w-full">
   
   <div x-data="{
        searchQuery: '',
        items: [
            'Milano', 'Alicante', 'Switzerland', 'Bilbao', 'Åland Islands', 'Stockholm', 'Torrevieja', 'Minneapolis'
        ].map(item => ({ name: item }))
    }">
     <input type="text" x-model="searchQuery" placeholder="Search..." class="w-full border-gray-300 rounded-md placeholder-gray-400 text-sm focus:border-orange-500 focus:ring-orange-500"> 
    <ul class="mt-12 text-sm space-y-2 text-gray-500 list-disc list-inside"> <template x-for="item in items" :key="item.name">
      <li x-show="item.name.toLowerCase().includes(searchQuery.toLowerCase())" x-text="item.name"></li>
     </template>
     <li x-show="item.name.toLowerCase().includes(searchQuery.toLowerCase())" x-text="item.name">Milano</li>
     <li x-show="item.name.toLowerCase().includes(searchQuery.toLowerCase())" x-text="item.name">Alicante</li>
     <li x-show="item.name.toLowerCase().includes(searchQuery.toLowerCase())" x-text="item.name">Switzerland</li>
     <li x-show="item.name.toLowerCase().includes(searchQuery.toLowerCase())" x-text="item.name">Bilbao</li>
     <li x-show="item.name.toLowerCase().includes(searchQuery.toLowerCase())" x-text="item.name">Åland Islands</li>
     <li x-show="item.name.toLowerCase().includes(searchQuery.toLowerCase())" x-text="item.name">Stockholm</li>
     <li x-show="item.name.toLowerCase().includes(searchQuery.toLowerCase())" x-text="item.name">Torrevieja</li>
     <li x-show="item.name.toLowerCase().includes(searchQuery.toLowerCase())" x-text="item.name">Minneapolis</li>
    </ul>
   </div> 
   
   <div class="pointer-events-none fixed inset-x-0 bottom-0 sm:flex sm:justify-center p-2">
    <div class="pointer-events-auto flex w-full max-w-md divide-x divide-neutral-200 rounded-lg bg-white shadow-xl border">
     <div class="flex w-0 flex-1 items-center p-4">
      <div class="w-full">
       <p class="text-sm font-medium text-neutral-900">Tutorial</p>
       <p class="mt-1 text-sm text-neutral-500">
        How to create a search input with Tailwind CSS and Alpinejs
       </p>
       <p class="mt-2 text-xs text-orange-500 underline"> <a href="https://lexingtonthemes.com">
         by © Lexington Themes</a> </p>
      </div>
     </div>
     <div class="flex">
      <div class="flex flex-col divide-y divide-neutral-200">
       <div class="flex h-0 flex-1"> <a href="https://lexingtonthemes.com/tutorials/how-to-create-a-search-input-with-tailwind-css-and-alpinejs/" type="button" class="flex w-full items-center justify-center rounded-none rounded-tr-lg border border-transparent px-4 py-3 text-sm font-medium text-orange-600 hover:text-orange-500 focus:z-10 focus:outline-none focus:ring-2 focus:ring-orange-500">Tutorial</a> </div>
       <div class="flex h-0 flex-1"> <a href="https://github.com/Lexington-Themes/lexington-tutorials/blob/main/src/pages/search/index.astro" class="flex w-full items-center justify-center rounded-none rounded-br-lg border border-transparent px-4 py-3 text-sm font-medium text-neutral-700 hover:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-orange-500">Get the code</a> </div>
      </div>
     </div>
    </div>
   </div> 
  </div>
 </div>
</section>

Related Examples

Range slider
Range slider with upper limit and lower limit.

Author:
Alok

2 years ago

11.1k
beautiful tailwind contact form
beautiful tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

4.9k
Payment Form

Author:
ABDO-SY

1 month ago

149
Toggle button

Author:
Matthew Chen

1 year ago

11.6k
Upload file input field

Author:
Gopi Yadav

2 years ago

13.1k
Float Input

Author:
Maxim

1 year ago

3.6k
Default phone input

Author:
Md. Tofayel islam

1 year ago

2.1k
Console like input field

Author:
Charlotte Dupont

2 years ago

10.7k
Multi Range Slider
Adjust the sliders to set your preferred price range. The left slider sets the minimum price, and the right slider sets the maximum price. The selected range is displayed below the sliders in real-time, allowing you to easily filter products within your budget.

Author:
SHARIFUL ISLAM

1 month ago

417
Google like input field
with Floating Label. The input placeholder floats towards the upside as the input field is in focus.

Author:
Samuel Dawson

2 years ago

16.1k
Single Input newsletter form

Author:
Task Master

2 years ago

10k
floting input

Author:
Md. Tofayel islam

1 year ago

2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components