nqvst/simpleAutocomplete.html

## simpleAutocomplete.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <input id="in" type="text" autofocus placeholder="fuzzy..."/>
    <div id="sugg"></div>
    <script>
        const lol = [
            {
                domain: 'google.com',
                version: 1,
            },
            {
                domain: 'github.com',
                version: 1,
            },
            {
                domain: 'codepen.com',
                version: 1,
            },
            {
                domain: 'twitter.com',
                version: 1,
            },
            {
                domain: 'facebook.com',
                version: 1,
            },
            {
                domain: 'quora.com',
                version: 1,
            },
        ];

        document.addEventListener("DOMContentLoaded", function(event) {
            console.log('dom ready');
            const inpField = document.querySelector('#in');
            const sugg = document.querySelector('#sugg');
            inpField.addEventListener('input', (e) => {
                console.log(e.target.value);
                const matches = lol.filter(val => {
                    console.log(val.domain, e.target.value);
                    return val && val.domain.indexOf(e.target.value)>-1;
                });
                const out = matches.map(s => {
                    return '<p>' + s.domain + '</p>';
                });
                console.log(out);
                sugg.innerHTML = out.join(' ');
            }, false);
        });

    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	</head>
	<body>
	<input id="in" type="text" autofocus placeholder="fuzzy..."/>
	<div id="sugg"></div>
	<script>
	const lol = [
	{
	domain: 'google.com',
	version: 1,
	},
	{
	domain: 'github.com',
	version: 1,
	},
	{
	domain: 'codepen.com',
	version: 1,
	},
	{
	domain: 'twitter.com',
	version: 1,
	},
	{
	domain: 'facebook.com',
	version: 1,
	},
	{
	domain: 'quora.com',
	version: 1,
	},
	];

	document.addEventListener("DOMContentLoaded", function(event) {
	console.log('dom ready');
	const inpField = document.querySelector('#in');
	const sugg = document.querySelector('#sugg');
	inpField.addEventListener('input', (e) => {
	console.log(e.target.value);
	const matches = lol.filter(val => {
	console.log(val.domain, e.target.value);
	return val && val.domain.indexOf(e.target.value)>-1;
	});
	const out = matches.map(s => {
	return '<p>' + s.domain + '</p>';
	});
	console.log(out);
	sugg.innerHTML = out.join(' ');
	}, false);
	});

	</script>
	</body>
	</html>