سرچ در یک آبجکت با استفاده از input

مثال سرچ در یک آبجکت با استفاده از input

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

در مرحله اول باید قسمت html کار رو بنویسیم 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello world</title>
    
</head>
<body>
    <input type="text" id="input-search">
</body>
<script src="app.js"></script>
</html>

در مرحله بعد در فایل app.js یک آبجیکت تعیرف میکنیم که شامل مقادیری می باشد که باید درآن سرچ شود که ممکن است این آبجکت از از داکیومنت html گرفته شود 

const products = [
    {
        title:'node js learning'
    },
    {
        title:'es6 js learning'
    },
    {
        title:'php'
    },
]

در مرحله بعد یک أبجکت تعریف میکنیم که مقادیر سرچ شده را در درون خود نگه میدارد 

const filters = {
    searchItem:''
}

و در ادامه یک تابع که در درون آبجکت فیلتر انجام میدهد و مقادیر را درون آبجکت filters ذخیره میکند 

const rebderProdoucrs = function(products, filter){
    const filP = products.filter(function(item){
        return item.title.toLowerCase().includes(filter.searchItem.toLowerCase())
    })
    console.log(filP)
}

و حالا باید مقادیر که مقادیر را از input بگیریم و بر روی تابع اعمال کنیم 

document.querySelector('#input-search').addEventListener('input', function(e){
    filters.searchItem = e.target.value
    rebderProdoucrs(products, filters) 
})

 

افزودن دیدگاه جدید

متن ساده

  • تگ‌های HTML مجاز نیستند.
  • خطوط و پاراگراف‌ها بطور خودکار اعمال می‌شوند.
  • Web page addresses and email addresses turn into links automatically.