szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[oktatas:web:javascript|< JavaScript]]

====== Szűrés ======

  * **Szerző:** Sallai András
  * Copyright (c) Sallai András, 2021
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== Nevek szűrése =====


<tabbox index.html>

<code 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>
</code>

<tabbox app.js>

<code javascript 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);        
    })
});

</code>




</tabbox>
<html>
<br>
<br>

<iframe src="/download/peldak/javascript/nevszuresjs.html" width="350" height="400" 
sandbox="allow-same-origin allow-scripts">
</iframe>

</html>