In this section we will create search bar in svelte with tailwind css. We will see svelte with tailwind search bar, search bar with icon in svelte with Tailwind CSS.
Install Tailwind CSS in Svelte with Typescript Using Vite
Tool Use
Tailwind CSS 3.x
Svelte
Heroicons icon
Example 1
svelte with tailwind css simple search bar.
<script>
let searchTerm = "";
</script>
<div class="flex items-center">
<div class="flex border border-blue-200 rounded">
<input
type="text"
class="block w-full px-4 py-2 text-blue-700 bg-white border rounded-md focus:border-blue-400 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40"
placeholder="Search..."
/>
<button
type="submit"
class="px-4 text-white bg-blue-600 border-l rounded-md"
on:click={() => console.log(searchTerm)}
>
Search
</button>
</div>
</div>
svelte with tailwind css search bar
svelte tailwind css search bar with svg search icon.
class="max-w-sm px-4">
<div class="relative">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="absolute top-0 bottom-0 w-6 h-6 my-auto text-gray-400 left-3"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
/>
</svg>
<input
type="text"
placeholder="Search"
class="w-full py-3 pl-12 pr-4 text-gray-500 border rounded-md outline-none bg-gray-50 focus:bg-white focus:border-indigo-600"
/>
</div>
</form>
svelte tailwind search bar with icon
Example 2
svelte tailwind css search bar with search results.
<script>
let searchTerm = "";
let data = [
"Apple",
"Banana",
"Cherry",
"Dates",
"Elderberry",
"Fig",
"Grape",
"app",
];
let results = [];
const search = () => {
if (searchTerm !== "") {
results = data.filter((item) =>
item.toLowerCase().includes(searchTerm.toLowerCase())
);
} else {
results = [];
}
};
</script>
<div>
<div class="flex items-center">
<div class="flex border border-blue-200 rounded">
<input
type="text"
class="block w-full px-4 py-2 text-blue-700 bg-white border rounded-md focus:border-blue-400 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40"
placeholder="Search..."
id="search"
bind:value={searchTerm}
/>
<button
type="button"
class="px-4 text-white bg-blue-600 border-l rounded-md"
on:click={search}
>
Search
</button>
</div>
</div>
<div class="px-8 pt-6 pb-8 mb-4 bg-white rounded">
<h2 class="block mb-2 text-sm font-bold text-gray-700">Results:</h2>
{#each results as result (result)}
<p>{result}</p>
{/each}
</div>
</div>
svelte tailwind search bar with search results
svelte tailwind css search bar with autocomplete search.
<script>
let searchTerm = "";
let data = [
"Apple",
"Banana",
"Cherry",
"Dates",
"Elderberry",
"Fig",
"Grape",
];
$: results = searchTerm
? data.filter((item) =>
item.toLowerCase().includes(searchTerm.toLowerCase())
)
: [];
</script>
<div class="w-full max-w-xs">
<form class="px-8 pt-6 pb-8 mb-4 bg-white rounded shadow-md">
<div class="mb-4">
<label class="block mb-2 text-sm font-bold text-gray-700" for="search">
Search
</label>
<div class="relative">
<input
class="w-full px-3 py-2 pl-10 leading-tight text-gray-700 border rounded shadow appearance-none focus:outline-none focus:shadow-outline"
id="search"
type="text"
placeholder="Search"
bind:value={searchTerm}
/>
<div class="absolute transform -translate-y-1/2 left-3 top-1/2">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-5 h-5 text-gray-400"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
/>
</svg>
</div>
</div>
</div>
</form>
{#if searchTerm && results.length > 0}
<div class="px-8 pt-6 pb-8 mb-4 bg-white rounded shadow-md">
<h2 class="block mb-2 text-sm font-bold text-gray-700">Results:</h2>
{#each results as result (result)}
<p>{result}</p>
{/each}
</div>
{/if}
</div>
svelte tailwind autocomplete search.
