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

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

خوب ابتدا باید در سند html یک div ایجاد کنیم که مقادیر آبجکت سرچ شده رو درون خود نگه داری کند

و سند 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">
    <div id="products"></div>
</body>
<script src="app.js"></script>
</html>

در ادامه در فایل app.js باید این تگ را بگیریم و با استفاده و مقادیر سرچ شده را به صورت زیر اضافه کینم

const products = [
    {
        title:'node js learning'
    },
    {
        title:'es6 js learning'
    },
    {
        title:'php'
    },
]
const filters = {
    searchItem:''
}
const rebderProdoucrs = function(products, filter){
    const filP = products.filter(function(item){
        return item.title.toLowerCase().includes(filter.searchItem.toLowerCase())
    })
    document.querySelector('#products').innerHTML = ''
    filP.forEach(item => {
        const productel = document.createElement('p')
        productel.textContent = item.title
        document.querySelector('#products').appendChild(productel)
    });
}

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