CaddyDz/search.html

## search.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>Instant Search JS</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.1.1/dist/instantsearch.min.css">
	<style>
		em {
			color: rgb(214, 33, 33);
			font-style: normal;
			font-weight: bold;
		}

		body {
			max-width: 500px;
			margin: auto;
			text-align: center;
		}

		.ais-search-box {
			margin-left: 15%;
			max-width: 265px;
		}

		.ais-search-box--input {
			height: unset;
			font-size: 16px;
		}

		.ais-hits--item {
			border: rgb(214, 33, 33) 1px solid;
			overflow: auto;
			overflow-x: hidden;
			overflow-y: hidden;
		}
	</style>
</head>

<body>
	<h1>Instant Search JS</h1>
	<label>Write anything</label><br>
	<input id="searchBox" type="text">
	<div id="prices"></div>
	<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@2.1.1/dist/instantsearch.min.js"></script>
	<script>
		var search = instantsearch({
			appId: 'latency',
			apiKey: '6be0576ff61c053d5f9a3225e2a90f76',
			indexName: 'instant_search',
		});

		var hits = instantsearch.widgets.hits({
			container: document.querySelector('#prices'),
			hitsPerPage: 1,
			templates: {
				item: `
				<div>
					<img src="{{image}}" align="left" alt="{{name}}" />
					<div class="hit-name">
						{{{ _highlightResult.name.value }}}
					</div>
					<div class="hit-description">
						{{ _highlightResult.description.value }}
					</div>
					<div class="hit-price">\${{price}}</div>
				</div>
				`
			}
		});

		var searchBox = instantsearch.widgets.searchBox({
			container: document.querySelector('#searchBox')
		});

		search.addWidget(hits);
		search.addWidget(searchBox);
		search.start();
	</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>Instant Search JS</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.1.1/dist/instantsearch.min.css">
	<style>
	em {
	color: rgb(214, 33, 33);
	font-style: normal;
	font-weight: bold;
	}

	body {
	max-width: 500px;
	margin: auto;
	text-align: center;
	}

	.ais-search-box {
	margin-left: 15%;
	max-width: 265px;
	}

	.ais-search-box--input {
	height: unset;
	font-size: 16px;
	}

	.ais-hits--item {
	border: rgb(214, 33, 33) 1px solid;
	overflow: auto;
	overflow-x: hidden;
	overflow-y: hidden;
	}
	</style>
	</head>

	<body>
	<h1>Instant Search JS</h1>
	<label>Write anything</label><br>
	<input id="searchBox" type="text">
	<div id="prices"></div>
	<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@2.1.1/dist/instantsearch.min.js"></script>
	<script>
	var search = instantsearch({
	appId: 'latency',
	apiKey: '6be0576ff61c053d5f9a3225e2a90f76',
	indexName: 'instant_search',
	});

	var hits = instantsearch.widgets.hits({
	container: document.querySelector('#prices'),
	hitsPerPage: 1,
	templates: {
	item: `
	<div>
	<img src="{{image}}" align="left" alt="{{name}}" />
	<div class="hit-name">
	{{{ _highlightResult.name.value }}}
	</div>
	<div class="hit-description">
	{{ _highlightResult.description.value }}
	</div>
	<div class="hit-price">\${{price}}</div>
	</div>
	`
	}
	});

	var searchBox = instantsearch.widgets.searchBox({
	container: document.querySelector('#searchBox')
	});

	search.addWidget(hits);
	search.addWidget(searchBox);
	search.start();
	</script>
	</body>

	</html>