خبر و ترفند روز

خبر و ترفند های روز را اینجا بخوانید!

نحوه ایجاد یک نوار جستجوی ساده با استفاده از لیست رشته ها در جاوا اسکریپت

ارشیا یوسفی ادیب ۲۶ فروردین, ۱۴۰۳ 5 min read

ساختن نوار جستجوی تکمیل خودکار خود ساده تر از آن چیزی است که فکر می کنید.

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

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

با این حال، شما همچنین می توانید یک نوار جستجوی ساده با استفاده از جاوا اسکریپت وانیلی ایجاد کنید که ورودی کاربر را با لیستی از رشته ها مقایسه می کند.

نحوه افزودن UI برای نوار جستجو

وب سایت شما باید دارای یک کادر ورودی باشد تا کاربران شما متنی را که می خواهند جستجو کنند وارد کنند. یکی از راه‌های انجام این کار استفاده از تگ ورودی و استایل آن است که شبیه نوار جستجو باشد.

  1. یک پوشه برای ذخیره وب سایت خود ایجاد کنید. در داخل پوشه، یک فایل HTML با نام index.html ایجاد کنید.
  2. فایل خود را با ساختار اصلی یک سند HTML پر کنید. اگر با HTML آشنا نیستید، نمونه‌های کد HTML زیادی وجود دارد که می‌توانید یاد بگیرید تا به سرعت بالا برید.      Searchbar        
              

      

  3. در داخل div کلاس کانتینر، یک تگ ورودی اضافه کنید. این به کاربر امکان می دهد متنی را که می خواهد جستجو کند را تایپ کند. هر زمان که آنها یک کاراکتر جدید وارد کنند، وب سایت شما تابع search() را فراخوانی می کند. این تابع را در مراحل بعدی ایجاد خواهید کرد.
        

    جستجوی کشورها

        

    ویژگی تکمیل خودکار تضمین می‌کند که مرورگر فهرست کشویی خود را بر اساس عبارت‌های جستجوی قبلی اضافه نمی‌کند.

  4. در همان پوشه فایل index.html خود، یک فایل CSS جدید به نام styles.css ایجاد کنید.
  5. فایل را با یک سبک برای صفحه وب کلی و نوار جستجو پر کنید:body {  margin: 0; بالشتک: 0; background-color: #f7f7f7;}* {  font-family: “Arial”, sans-serif;}.container {  padding: 100px 25%; صفحه نمایش: انعطاف پذیر; flex-direction: ستون. ارتفاع خط: 2 ريم; اندازه فونت: 1.2em; رنگ: #202C39;}#searchbar {   padding: 15px; border-radius: 5px;}input[type=text] {   -webkit-transition: width 0.15s ease-in-out; انتقال: عرض 0.15s ease-in-out؛}
  6. در index.html، یک پیوند به فایل CSS خود در داخل تگ head و زیر برچسب عنوان اضافه کنید:
  7. فایل index.html را در یک مرورگر وب باز کنید و رابط کاربری نوار جستجوی خود را مشاهده کنید.
<!doctype html>
<html lang="en-US">
  <head>
    <title>Searchbar</title>
  </head>
  <body>
    <div class="container">
      <!-- Webpage content goes here-->
    </div>
  </body>
</html>
<div class="container">
    <h2>Search Countries</h2>
    <input id="searchbar" autocomplete="off" onkeyup="search()" type="text"\nname="search" placeholder="What are you looking for?">
</div>
body {
  margin: 0;
  padding: 0;
  background-color: #f7f7f7;
}
* {
  font-family: "Arial", sans-serif;
}
.container {
  padding: 100px 25%;
  display: flex;
  flex-direction: column;
  line-height: 2rem;
  font-size: 1.2em;
  color: #202C39;
}
#searchbar {
   padding: 15px;
   border-radius: 5px;
}
input[type=text] {
   -webkit-transition: width 0.15s ease-in-out;
   transition: width 0.15s ease-in-out;
}
<link rel="stylesheet" href="styles.css">

وب سایت HTML با نوار جستجو در مرورگر

نحوه ایجاد رشته های لیست برای نوار جستجو

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

شما می توانید به صورت پویا این لیست را با استفاده از جاوا اسکریپت ایجاد کنید، زیرا صفحه در حال بارگیری است.

  1. در داخل index.html، زیر تگ ورودی، یک div اضافه کنید. این div یک منوی کشویی نشان می دهد که حاوی لیستی از مواردی است که با آنچه کاربر در جستجوی آن است مطابقت دارد:
  • در همان پوشه فایل index.html و فایل styles.css، یک فایل جدید به نام script.js ایجاد کنید.
  • در داخل script.js، یک تابع جدید به نام () loadSearchData ایجاد کنید. در داخل تابع، یک آرایه را با لیستی از رشته ها مقداردهی اولیه کنید. به خاطر داشته باشید که این یک لیست ثابت کوچک است. یک پیاده‌سازی پیچیده‌تر باید جستجو از طریق مجموعه داده‌های بزرگ‌تر را در نظر بگیرد.function loadSearchData() {  // داده‌هایی که در نوار جستجو استفاده می‌شوند  اجازه می‌دهد کشورها = [    ‘Australia’,    ‘Austria’,    ‘Brazil’,   ‘Canada’,    ‘ دانمارک،    «مصر»،    «فرانسه»،    «آلمان»،    «ایالات متحده آمریکا»،    «ویتنام»  ]؛}
  • در داخل loadSearchData() و زیر آرایه جدید، عنصر div را دریافت کنید که موارد جستجوی منطبق را به کاربر نمایش می دهد. در فهرست div، یک تگ لنگر برای هر آیتم داده در لیست اضافه کنید::// دریافت عنصر HTML لیست لیست = document.getElementById(‘list’);// هر آیتم داده را به عنوان یک برچسب اضافه کنید. forEach((country)=>{    let a = document.createElement(“a”);    a.innerText = country;    a.classList.add(“listItem”);   list.appendChild(a);})
  • در تگ بدنه index.html، ویژگی رویداد onload را برای فراخوانی تابع جدید loadSearchData () اضافه کنید. با این کار داده‌ها در حین بارگیری صفحه بارگیری می‌شود.
  • در index.html، قبل از پایان تگ بدنه، یک تگ اسکریپت برای پیوند به فایل جاوا اسکریپت خود اضافه کنید:        
  • در styles.css، مقداری استایل به لیست کشویی اضافه کنید:#list {   border: 1px solid lightgrey; حاشیه-شعاع: 5px; display: block;}.listItem {   display: flex; flex-direction: ستون. text-decoration: هیچ; بالشتک: 5px 20px; color: black;}.listItem:hover {   background-color: light gray;}
  • index.html را در یک مرورگر وب باز کنید تا نوار جستجوی خود و لیست نتایج جستجوی موجود را مشاهده کنید. قابلیت جستجو هنوز کار نمی کند، اما باید رابط کاربری را مشاهده کنید که از آن استفاده خواهد کرد:
    • <div id="list"></div>
    function loadSearchData() {
      // Data to be used in the searchbar
      let countries = [
        'Australia',
        'Austria',
        'Brazil',
        'Canada',
        'Denmark',
        'Egypt',
        'France',
        'Germany',
        'USA',
        'Vietnam'
      ];
    }
    // Get the HTML element of the list
    let list = document.getElementById('list');
    // Add each data item as an <a> tag
    countries.forEach((country)=>{
        let a = document.createElement("a");
        a.innerText = country;
        a.classList.add("listItem");
        list.appendChild(a);
    })
    <body onload="loadSearchData()">
    <body onload="loadSearchData()">
        <!-- Your webpage content -->
        <script src="script.js"></script>
    </body>
    #list {
       border: 1px solid lightgrey;
       border-radius: 5px;
       display: block;
    }
    .listItem {
       display: flex;
       flex-direction: column;
       text-decoration: none;
       padding: 5px 20px;
       color: black;
    }
    .listItem:hover {
       background-color: lightgrey;
    }

    نوار جستجوی وب سایت HTML با لیست جستجوی فیلتر نشده

    نحوه ایجاد کرکره با نتایج منطبق در نوار جستجو

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

    1. در styles.css، استایل لیست را جایگزین کنید تا لیست به طور پیش‌فرض پنهان شود:#list {   border: 1px solid lightgrey; حاشیه-شعاع: 5px; نمایش: هیچکدام؛}
    2. در script.js یک تابع جدید به نام search() ایجاد کنید. به خاطر داشته باشید که برنامه هر بار که کاربر یک کاراکتر را وارد یا از نوار جستجو حذف می کند، این تابع را فراخوانی می کند. برخی از برنامه ها برای واکشی اطلاعات نیاز به سفر به سرور دارند. در چنین مواردی، این پیاده سازی می تواند رابط کاربری شما را کند کند. ممکن است لازم باشد پیاده‌سازی را تغییر دهید تا این مورد در نظر گرفته شود.function search() {    // search functionality going here}
    3. در داخل تابع search()، عنصر div HTML را برای لیست دریافت کنید. همچنین عناصر تگ لنگر HTML هر آیتم را در داخل لیست دریافت کنید:let listContainer = document.getElementById(‘list’);let listItems = document.getElementsByClassName(‘listItem’);
    4. دریافت ورودی که کاربر در نوار جستجو وارد کرده است:let input = document.getElementById(‘search bar’).value input = input.toLowerCase();
    5. ورودی کاربر را با هر مورد در لیست مقایسه کنید. به عنوان مثال، اگر کاربر “a” را وارد کند، اگر “a” در داخل “استرالیا”، سپس “اتریش”، “برزیل”، “کانادا” و غیره باشد، تابع مقایسه خواهد شد. اگر مطابقت داشته باشد، آن مورد را در لیست نمایش می دهد. اگر مطابقت نداشته باشد، آن آیتم را پنهان می کند. ||. ورودی === “”) {        listItems[i].style.display=”none”; ادامه هید؛ }    else {        listItems[i].style.display=”flex”; noResults = نادرست; }}
    6. اگر هیچ نتیجه ای در لیست وجود ندارد، لیست را به طور کامل پنهان کنید:listContainer.style.display = noResults ? “none” : “block”;
    7. روی فایل index.html کلیک کنید تا در مرورگر وب باز شود.
    8. شروع به تایپ کردن در نوار جستجو کنید. همانطور که تایپ می کنید، لیست نتایج به روز می شود تا فقط نتایج منطبق را نمایش دهد.
    #list {
       border: 1px solid lightgrey;
       border-radius: 5px;
       display: none;
    }
    function search() {
        // search functionality goes here
    }
    let listContainer = document.getElementById('list');
    let listItems = document.getElementsByClassName('listItem');
    let input = document.getElementById('searchbar').value
    input = input.toLowerCase(); 
    let noResults = true;
    for (i = 0; i < listItems.length; i++) { 
        if (!listItems[i].innerHTML.toLowerCase().includes(input) || input === "") {
            listItems[i].style.display="none";
            continue;
        }
        else {
            listItems[i].style.display="flex";
            noResults = false; 
        }
    }
    listContainer.style.display = noResults ? "none" : "block";

    وب سایت HTML با نوار جستجو در مرورگرنوار جستجوی HTML با نتایج منطبق

    استفاده از نوار جستجو برای جستجوی نتایج منطبق

    اکنون که می دانید چگونه یک نوار جستجو با انتخاب رشته ایجاد کنید، می توانید عملکردهای بیشتری اضافه کنید.

    به عنوان مثال، می توانید پیوندهایی را به تگ های لنگر خود اضافه کنید تا بسته به نتیجه ای که کاربر روی آن کلیک می کند، صفحات مختلف باز شود. می توانید نوار جستجوی خود را برای جستجو در میان اشیاء پیچیده تر تغییر دهید. همچنین می‌توانید کد را برای کار با چارچوب‌هایی مانند React تغییر دهید.

    مطلب مرتبط:   چگونه با استفاده از TypeORM و PostgreSQL یک Nest.js CRUD REST API بسازیم
    Tags: