67 lines
2.0 KiB
HTML
67 lines
2.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
|
|
<style>
|
|
.algolia-autocomplete {
|
|
width: 100%;
|
|
}
|
|
.algolia-autocomplete .aa-input, .algolia-autocomplete .aa-hint {
|
|
width: 100%;
|
|
}
|
|
.algolia-autocomplete .aa-hint {
|
|
color: #999;
|
|
}
|
|
.algolia-autocomplete .aa-dropdown-menu {
|
|
width: 100%;
|
|
background-color: #fff;
|
|
border: 1px solid #999;
|
|
border-top: none;
|
|
}
|
|
.algolia-autocomplete .aa-dropdown-menu .aa-suggestion {
|
|
cursor: pointer;
|
|
padding: 5px 4px;
|
|
}
|
|
.algolia-autocomplete .aa-dropdown-menu .aa-suggestion.aa-cursor {
|
|
background-color: #B2D7FF;
|
|
}
|
|
.algolia-autocomplete .aa-dropdown-menu .aa-suggestion em {
|
|
font-weight: bold;
|
|
font-style: normal;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-sm-6 col-sm-offset-3">
|
|
<form action="#" class="form">
|
|
<h3>Basic example</h3>
|
|
<input class="form-control" id="contacts" name="contacts" type="text" placeholder='Search by name' />
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/jquery/3.2.1/jquery.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/autocomplete.js/0/autocomplete.jquery.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>
|
|
<script>
|
|
var client = algoliasearch('latency', '6be0576ff61c053d5f9a3225e2a90f76');
|
|
var index = client.initIndex('contacts');
|
|
|
|
$('#contacts').autocomplete({ hint: false }, [
|
|
{
|
|
source: $.fn.autocomplete.sources.hits(index, { hitsPerPage: 5 }),
|
|
displayKey: 'name',
|
|
templates: {
|
|
suggestion: function(suggestion) {
|
|
return suggestion._highlightResult.name.value;
|
|
}
|
|
}
|
|
}
|
|
]);
|
|
</script>
|
|
</body>
|
|
</html>
|