<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - live search</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
* {
box-sizing: border-box;
}
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.container {
display: grid;
width: 400px;
grid-template-columns: 1fr;
grid-template-rows: 50px 1fr;
xbackground: #eee;
}
input {
padding-left: 10px;
margin-top: 20px;
}
.placeholder {
display: flex;
flex-direction: column;
background: #eee;
}
.user-item {
margin: 10px;
}
.title {
background: lightgreen;
xmargin: 30px;
text-align: center;
padding: 20px;
border-radius: 20px;
font-size: 1.1em;
}
</style>
<script>
window.console = window.console || function(t) {};
</script>
</head>
<body translate="no">
<div class="container">
<div class = "title">Search for username or name</div>
<input type="search">
<div class="placeholder">
</div>
</div>
</div>
<script id="rendered-js" >
console.clear();
const users = [
{ name: 'Jan', username: 'jngrde' },
{ name: 'Steffi', username: 'bassewitz' },
{ name: 'Jerry', username: 'badabam' },
{ name: 'Mark', username: 'markJohnson#' },
{ name: 'Anna', username: 'corona88' },
{ name: 'Katharina', username: 'sansiveria123' },
{ name: 'Antonia', username: 'Monstera2019' },
{ name: 'Martin', username: 'mckh2o' }];
const input = get('input');
const placeholder = get('.placeholder');
input.addEventListener('input', search);
function search() {
placeholder.innerHTML = '';
const inputValue = input.value.toLowerCase();
const resultObj = users.filter((user) =>
user.name.
toLowerCase().
includes(inputValue) ||
user.username.
toLowerCase().
includes(inputValue));
if (input.value) {
renderResult(resultObj);
}
};
function renderResult(arr) {
arr.forEach(user => placeholder.insertAdjacentHTML('beforeend', `<div class="result">${user.name}, ${user.username}</div>`));
}
function get(selector, target = document) {
return target.querySelector(selector);
}
function getAll(selector, target = document) {
return target.querySelectorAll(selector);
}
//# sourceURL=pen.js
</script>
</body>
</html>