< JavaScript

Szűrés

Nevek szűrése

index.html

index.html
<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nevek</title>
</head>
<body>
 
 
    <div class="container">
        <input type="text" id="word" 
        autocomplete="off">
        <ul id="names"></ul>
    </div>
 
    <script src="app.js"></script>
</body>
</html>

app.js

app.js
const ul = document.querySelector('#names');
const wordElem = document.querySelector('#word');
 
var namesArray = [
    'Pete Elemér',
    'Vihar Elek',
    'Roham Gábor',
    'Piti Ilona',
    'Landos Viktor',
    'Anda Zsolt'
];
 
namesArray.forEach(name => {
    var li = document.createElement('li');
    li.textContent = name;
    ul.appendChild(li);
});
 
wordElem.addEventListener('keyup', () => {
    console.log(wordElem.value);
    let a = namesArray.filter( element => {
        if (element.indexOf(wordElem.value)>-1) return element;
    });
    ul.innerHTML = '';
    a.forEach( name => {
        var li = document.createElement('li');
        li.textContent = name;
        ul.appendChild(li);        
    })
});