نحوه ایجاد ورودی جستجو با Tailwind CSS و JavaScript

Summarize this content to 400 words in Persian Lang
امروز قصد داریم یک ورودی جستجو با Tailwind CSS و JavaScript ایجاد کنیم. درست مانند آموزش قبلی با Alpinejs، ما از همان ساختار استفاده خواهیم کرد و مقداری جاوا اسکریپت اضافه می کنیم تا آن را تعاملی کنیم.آن را به صورت زنده ببینید و کد را دریافت کنید

ورودی جستجو چیست؟

ورودی جستجو یک کنترل فرم است که به کاربران امکان می دهد یک عبارت جستجو را وارد کرده و نتایج مرتبط را از پایگاه داده یا موتور جستجو بازیابی کنند. این یک جزء حیاتی در برنامه های کاربردی وب است که به کاربران امکان می دهد مطالب یا اطلاعات خاصی را به سرعت و کارآمد پیدا کنند. ورودی جستجو معمولاً با یک دکمه یا نماد جستجو برای شروع فرآیند جستجو همراه است. در برخی موارد، جستجو ممکن است به طور خودکار شروع شود، همانطور که کاربر در پرس و جو خود تایپ می کند و بازخورد و نتایج فوری ارائه می دهد.

ویژگی های کلیدی:

در ارتباط بودن: کاربران می توانند پرس و جوها را تایپ کنند و پیشنهادات یا نتایج را در زمان واقعی دریافت کنند.

همه کاره: قابل استفاده در برنامه های مختلف، از سایت های تجارت الکترونیک گرفته تا سیستم های مدیریت فایل.

کاربر پسند: فرآیند یافتن اقلام یا اطلاعات خاص را ساده می کند.

موارد استفاده:

جستجوی محصول:

ورودی جستجو را می توان در یک سایت تجارت الکترونیک ادغام کرد تا به کاربران کمک کند محصولات را در یک موجودی وسیع پیدا کنند. به عنوان مثال، کاربران می توانند نام یک محصول را تایپ کنند و ورودی جستجو موارد منطبق را فیلتر و نمایش می دهد.

جستجوی فایل:

در سیستم‌های مدیریت فایل یا سیستم‌عامل‌ها، ورودی جستجو می‌تواند به کاربران کمک کند تا فایل‌ها را در فهرست‌ها یا کل سیستم فایل پیدا کنند. این به ویژه برای یافتن سریع اسناد، تصاویر یا هر نوع فایل دیگری مفید است.

جستجوی سند:

ورودی‌های جستجو در سیستم‌های مدیریت اسناد ضروری هستند و به کاربران اجازه می‌دهند از طریق پایگاه داده بزرگی از اسناد جستجو کنند. این قابلیت برای سازمان هایی که نیاز به مدیریت و بازیابی اسناد به طور موثر دارند مفید است.

جستجوی داده ها:

در برنامه‌هایی که با مجموعه داده‌های بزرگ سروکار دارند، ورودی جستجو به کاربران امکان می‌دهد تا نقاط داده خاصی را در یک پایگاه داده یا موتور جستجو پیدا کنند. این برای تجزیه و تحلیل داده ها، گزارش دهی و فرآیندهای تصمیم گیری بسیار مهم است.

بیایید نشانه گذاری را بسازیم

درک کد:

id=”search-component”: این محفظه ورودی جستجو و لیست موارد است.

id=”search-input”: این ورودی جستجو است.

id=”items-list”: این لیست مواردی است که بر اساس عبارت جستجو فیلتر می شوند.

کلاس ها برای اختصار حذف می شوند

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

بیایید مقداری جاوا اسکریپت اضافه کنیم

متد addEventListener

document.addEventListener(“DOMContentLoaded”, function() {}): این شنونده رویدادی است که هنگامی که DOM (مدل شیء سند) به طور کامل بارگیری شده و برای تعامل آماده است، راه اندازی می شود.

const searchComponent = document.getElementById(“search-component”);: این عنصر جزء جستجو است که می خواهیم با آن تعامل داشته باشیم.

const searchInput = document.getElementById(“search-input”);: این عنصر ورودی جستجو است که می خواهیم با آن تعامل داشته باشیم.

const itemsList = document.getElementById(“items-list”);: این لیست مواردی است که می خواهیم با آنها تعامل داشته باشیم.

آرایه اقلام

const items = [“Milano”, “Alicante”, “Switzerland”, “Bilbao”, “Åland Islands”, “Stockholm”, “Torrevieja”, “Minneapolis”];: این آرایه ای از موارد است که می خواهیم بر اساس عبارت جستجو فیلتر کنیم.

رندر اقلام

function renderItems(filter = “”) {: این تابعی است که با تغییر مقدار ورودی جستجو فراخوانی می شود.

itemsList.innerHTML = “”;: این یک خط کد است که لیست موارد را پاک می کند.

const filteredItems = items.filter((item) => item.toLowerCase().includes(filter.toLowerCase()));: این یک خط کد است که موارد را بر اساس عبارت جستجو فیلتر می کند.

filteredItems.forEach((item) => {: این یک خط کد است که روی آیتم های فیلتر شده تکرار می شود و برای هر مورد یک آیتم لیست جدید ایجاد می کند.

const li = document.createElement(“li”);: این یک خط کد است که یک عنصر آیتم لیست جدید ایجاد می کند.

li.textContent = item;: این یک خط کد است که محتوای متن مورد لیست را تنظیم می کند.

itemsList.appendChild(li);: این یک خط کد است که آیتم لیست را به لیست آیتم ها اضافه می کند.

افزودن شنونده رویداد

searchInput.addEventListener(“input”, function() {: این یک خط کد است که شنونده رویداد را به ورودی جستجو اضافه می کند.

renderItems(searchInput.value);: این یک خط کد است که تابع renderItems را با مقدار ورودی جستجو به عنوان آرگومان فراخوانی می کند.

رندر اولیه

renderItems();: این یک خط کد است که تابع renderItems را بدون هیچ آرگومان فراخوانی می کند.

document.addEventListener(“DOMContentLoaded”, function() {
const searchComponent = document.getElementById(“search-component”);
const searchInput = document.getElementById(“search-input”);
const itemsList = document.getElementById(“items-list”);

const items = [
“Milano”,
“Alicante”,
“Switzerland”,
“Bilbao”,
“Åland Islands”,
“Stockholm”,
“Torrevieja”,
“Minneapolis”,
];

function renderItems(filter = “”) {
itemsList.innerHTML = “”;
const filteredItems = items.filter((item) =>
item.toLowerCase().includes(filter.toLowerCase())
);
filteredItems.forEach((item) => {
const li = document.createElement(“li”);
li.textContent = item;
itemsList.appendChild(li);
});
}

searchInput.addEventListener(“input”, function() {
renderItems(searchInput.value);
});

// Initial render
renderItems();
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

نتیجه

این یک قابلیت جستجوی فوق العاده ساده است که می تواند برای فیلتر کردن لیستی از آیتم ها بر اساس یک عبارت جستجو بدون نیاز به هیچ گونه کتابخانه یا چارچوب اضافی استفاده شود. این برای استفاده تولیدی نیست، اما راهی عالی برای یادگیری نحوه ساخت رابط کاربری تعاملی با جاوا اسکریپت است.

امیدوارم از این آموزش لذت برده باشید و روز خوبی داشته باشید!

document.addEventListener("DOMContentLoaded", function() {
    const searchComponent = document.getElementById("search-component");
    const searchInput = document.getElementById("search-input");
    const itemsList = document.getElementById("items-list");

    const items = [
        "Milano",
        "Alicante",
        "Switzerland",
        "Bilbao",
        "Åland Islands",
        "Stockholm",
        "Torrevieja",
        "Minneapolis",
    ];

    function renderItems(filter = "") {
        itemsList.innerHTML = "";
        const filteredItems = items.filter((item) =>
            item.toLowerCase().includes(filter.toLowerCase())
        );
        filteredItems.forEach((item) => {
            const li = document.createElement("li");
            li.textContent = item;
            itemsList.appendChild(li);
        });
    }

    searchInput.addEventListener("input", function() {
        renderItems(searchInput.value);
    });

    // Initial render
    renderItems();
});