آموزش es6

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

حامد حسینی — Sat, 07 Mar 2020 09:01:52 +0000

سرچ در یک آبجکت با استفاده از input قسمت 2 حامد حسینی ش., 03/07/2020 - 12:31

در قسمت قبل (سرچ در یک آبجکت با استفاده از 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) 
})

آموزش es6

java script

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

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

حامد حسینی — Sat, 07 Mar 2020 08:43:11 +0000

سرچ در یک آبجکت با استفاده از input حامد حسینی ش., 03/07/2020 - 12:13

سلام میخوام در این آموزش یک سرچ ساده در یک آبجکت انجام بدیم که مقدار اولیه از یک 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) 
})

آموزش es6

java script