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 v3.4. It is responsive.

Input

Author Michael Andreuzza

Tailwind v3.4 4.2k 4

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

Material 3 Checkboxes [Light]
Checkboxes that conform to Google's Material 3 design guidelines

Nick Girga

1 year ago

993
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.

SHARIFUL ISLAM

1 year ago

2.6k
File upload input section with file preview

Noob

4 years ago

13.2k
simple badge

Muhammad Imran

1 year ago

2.3k
Login form

Gopi Yadav

3 years ago

12k
Domain For Sale Template
Domain For Sale Template

Geoffrey Callaghan

2 years ago

5k
Stacked Checkboxes

kishan pc

2 years ago

3.9k
Contact us form
Contact us form

Geoffrey Callaghan

2 years ago

7.5k
File input

Anonymous

2 years ago

8.1k
test2

SHAHAD EIDAH ALHAERTHI

2 years ago

2.2k
Upvote downvote buttons [alpine]
upvote and downvote buttons made as working version in alpine.js

Anonymous

3 years ago

9.6k
Cart with alpinejs and tailwind css
How to add items to your cart with Tailwind CSS and Alpinejs

Michael Andreuzza

2 years ago

4.2k