Cards with Text Search
Simple x-for example with local JSON data source
Using filter
to filter the cards
Advertisment
The code for the starter component which you can drop into your existing project.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Alpine.js Example - Cards with Search</title>
<link
href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
rel="stylesheet"
/>
<script
src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"
defer
></script>
</head>
<body class="bg-grey-100 px-3 font-sans leading-normal tracking-normal">
<div class="container pt-8 mx-auto" x-data="loadEmployees()">
<input
x-ref="searchField"
x-model="search"
x-on:keydown.window.prevent.slash="$refs.searchField.focus()"
placeholder="Search for an employee..."
type="search"
class="block w-full bg-gray-200 focus:outline-none focus:bg-white focus:shadow text-gray-700 font-bold rounded-lg px-4 py-3"
/>
<div class="mt-4 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
<template x-for="item in filteredEmployees" :key="item">
<div
class="flex items-center shadow hover:bg-indigo-100 hover:shadow-lg hover:rounded transition duration-150 ease-in-out transform hover:scale-105 p-3"
>
<img
class="w-10 h-10 rounded-full mr-4"
:src="`${item.profile_image}`"
/>
<div class="text-sm">
<p
class="text-gray-900 leading-none"
x-text="item.employee_name + ' (' + item.employee_age + ')'"
></p>
<p
class="text-gray-600"
x-text="'$'+item.employee_salary/100"
></p>
</div>
</div>
</template>
</div>
</div>
<script>
function loadEmployees() {
return {
search: "",
myForData: sourceData,
get filteredEmployees() {
if (this.search === "") {
return this.myForData;
}
return this.myForData.filter((item) => {
return item.employee_name
.toLowerCase()
.includes(this.search.toLowerCase());
});
},
};
}
var sourceData = [
{
id: "1",
employee_name: "Tiger Nixon",
employee_salary: "320800",
employee_age: "61",
profile_image: "https://randomuser.me/api/portraits/men/1.jpg",
},
{
id: "2",
employee_name: "Garrett Winters",
employee_salary: "170750",
employee_age: "63",
profile_image: "https://randomuser.me/api/portraits/men/2.jpg",
},
{
id: "3",
employee_name: "Ashton Cox",
employee_salary: "86000",
employee_age: "66",
profile_image: "https://randomuser.me/api/portraits/men/3.jpg",
},
{
id: "4",
employee_name: "Cedric Kelly",
employee_salary: "433060",
employee_age: "22",
profile_image: "https://randomuser.me/api/portraits/men/4.jpg",
},
{
id: "5",
employee_name: "Airi Satou",
employee_salary: "162700",
employee_age: "33",
profile_image: "https://randomuser.me/api/portraits/women/5.jpg",
},
{
id: "6",
employee_name: "Brielle Williamson",
employee_salary: "372000",
employee_age: "61",
profile_image: "https://randomuser.me/api/portraits/women/6.jpg",
},
{
id: "7",
employee_name: "Herrod Chandler",
employee_salary: "137500",
employee_age: "59",
profile_image: "https://randomuser.me/api/portraits/men/7.jpg",
},
{
id: "8",
employee_name: "Rhona Davidson",
employee_salary: "327900",
employee_age: "55",
profile_image: "https://randomuser.me/api/portraits/women/8.jpg",
},
{
id: "9",
employee_name: "Colleen Hurst",
employee_salary: "205500",
employee_age: "39",
profile_image: "https://randomuser.me/api/portraits/women/9.jpg",
},
{
id: "10",
employee_name: "Sonya Frost",
employee_salary: "103600",
employee_age: "23",
profile_image: "https://randomuser.me/api/portraits/women/10.jpg",
},
{
id: "11",
employee_name: "Jena Gaines",
employee_salary: "90560",
employee_age: "30",
profile_image: "https://randomuser.me/api/portraits/women/11.jpg",
},
{
id: "12",
employee_name: "Quinn Flynn",
employee_salary: "342000",
employee_age: "22",
profile_image: "https://randomuser.me/api/portraits/men/12.jpg",
},
{
id: "13",
employee_name: "Charde Marshall",
employee_salary: "470600",
employee_age: "36",
profile_image: "https://randomuser.me/api/portraits/women/12.jpg",
},
{
id: "14",
employee_name: "Haley Kennedy",
employee_salary: "313500",
employee_age: "43",
profile_image: "https://randomuser.me/api/portraits/women/14.jpg",
},
{
id: "15",
employee_name: "Tatyana Fitzpatrick",
employee_salary: "385750",
employee_age: "19",
profile_image: "https://randomuser.me/api/portraits/women/15.jpg",
},
{
id: "16",
employee_name: "Michael Silva",
employee_salary: "198500",
employee_age: "66",
profile_image: "https://randomuser.me/api/portraits/men/16.jpg",
},
{
id: "17",
employee_name: "Paul Byrd",
employee_salary: "725000",
employee_age: "64",
profile_image: "https://randomuser.me/api/portraits/men/17.jpg",
},
{
id: "18",
employee_name: "Gloria Little",
employee_salary: "237500",
employee_age: "59",
profile_image: "https://randomuser.me/api/portraits/women/18.jpg",
},
{
id: "19",
employee_name: "Bradley Greer",
employee_salary: "132000",
employee_age: "41",
profile_image: "https://randomuser.me/api/portraits/men/19.jpg",
},
{
id: "20",
employee_name: "Dai Rios",
employee_salary: "217500",
employee_age: "35",
profile_image: "https://randomuser.me/api/portraits/men/20.jpg",
},
{
id: "21",
employee_name: "Jenette Caldwell",
employee_salary: "345000",
employee_age: "30",
profile_image: "https://randomuser.me/api/portraits/women/21.jpg",
},
{
id: "22",
employee_name: "Yuri Berry",
employee_salary: "675000",
employee_age: "40",
profile_image: "https://randomuser.me/api/portraits/men/22.jpg",
},
{
id: "23",
employee_name: "Caesar Vance",
employee_salary: "106450",
employee_age: "21",
profile_image: "https://randomuser.me/api/portraits/men/23.jpg",
},
{
id: "24",
employee_name: "Doris Wilder",
employee_salary: "85600",
employee_age: "23",
profile_image: "https://randomuser.me/api/portraits/women/24.jpg",
},
];
</script>
</body>
</html>
Find more examples at: www.alpinetoolbox.com/examples