JSFiddle - React, Tailwind, and code Playground

by ainop

HTML

<input class="in" type="text" />
<div class="out"></div>

JavaScript

var base = [];

for (var i = 0; i < 1000; i++) {
	base.push((Math.round(Math.random() * 1e10)).toString(16));
}

(function (input, output, base) {
	input.focus();
	onInput();

	window.addEventListener('keydown', function (e) {
		input.focus();
	});

	input.addEventListener('input', onInput);

	function onInput() {
		input.style.color = null;
		var out = search(input.value, base);
		if (out.length < 1) {
			input.style.color = 'red';
			output.innerHTML = 'Нет результатов для <b>' + input.value + '</b>';
		} else {
			output.innerHTML = out.join('<br><br>');
		}
	}

	function search(pattern, base) {
		var re = new RegExp(pattern, 'i');
		return base.map(function (entry) {
			if (re.test(entry)) {
				return entry.replace(/((\d{4} \d{2}-\d{3})( \d{1}-\d{2}-\d{2})?)$/, '<b>$1</b>');
			}
		});
	}
}(
	document.querySelector('.in'),
	document.querySelector('.out'),
	base
));