208 lines
6.8 KiB
HTML
208 lines
6.8 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
|
||
|
|
<link rel="stylesheet" href="playground.css">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="container">
|
||
|
|
<form action="#">
|
||
|
|
<div class="autocomplete-wrapper">
|
||
|
|
<div class="form-group">
|
||
|
|
<div class="col-sm-4">
|
||
|
|
<h4>Simple auto-complete</h4>
|
||
|
|
<div class="input-group">
|
||
|
|
<input id="contacts" name="contacts" class="form-control" type="text">
|
||
|
|
<span class="input-group-addon">Go</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-sm-4">
|
||
|
|
<h4>Multi-sections auto-complete</h4>
|
||
|
|
<input id="contacts2" name="contacts2" class="form-control" type="text">
|
||
|
|
</div>
|
||
|
|
<div class="col-sm-4">
|
||
|
|
<h4>Tabbed auto-complete</h4>
|
||
|
|
<div class="input-group">
|
||
|
|
<input id="q3" name="q3" class="form-control" type="text">
|
||
|
|
<span class="input-group-addon">Go</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script src="../node_modules/jquery/dist/jquery.js"></script>
|
||
|
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
|
||
|
|
<script src="../dist/autocomplete.jquery.js"></script>
|
||
|
|
<script src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>
|
||
|
|
|
||
|
|
<script type="text/template" id="my-custom-menu-template">
|
||
|
|
<div class="my-custom-menu">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-sm-6">
|
||
|
|
<div class="aa-dataset-contacts1"></div>
|
||
|
|
</div>
|
||
|
|
<div class="col-sm-6">
|
||
|
|
<div class="aa-dataset-contacts2"></div>
|
||
|
|
<div class="aa-dataset-contacts3"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script type="text/template" id="menu3">
|
||
|
|
<ul class="nav nav-tabs">
|
||
|
|
<li class="active"><a href="#all" role="tab" data-toggle="tab">All</a></li>
|
||
|
|
<li><a href="#actors" role="tab" data-toggle="tab">Actors</a></li>
|
||
|
|
<li><a href="#shows" role="tab" data-toggle="tab">Shows</a></li>
|
||
|
|
<li><a href="#episodes" role="tab" data-toggle="tab">Episodes</a></li>
|
||
|
|
</ul>
|
||
|
|
<div class="tab-content">
|
||
|
|
<div class="tab-pane active aa-dataset-all" id="all"></div>
|
||
|
|
<div class="tab-pane aa-dataset-actors" id="actors"></div>
|
||
|
|
<div class="tab-pane aa-dataset-shows" id="shows"></div>
|
||
|
|
<div class="tab-pane aa-dataset-episodes" id="episodes"></div>
|
||
|
|
</div>
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
var client = algoliasearch('latency', '6be0576ff61c053d5f9a3225e2a90f76');
|
||
|
|
var index = client.initIndex('contacts');
|
||
|
|
var tvshows = client.initIndex('tvshows_tae_followers');
|
||
|
|
|
||
|
|
$('#contacts').autocomplete({ hint: true }, [
|
||
|
|
{
|
||
|
|
source: function(q, cb) {
|
||
|
|
index.search(q, { hitsPerPage: 5 }, function(error, content) {
|
||
|
|
if (error) {
|
||
|
|
cb([]);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
cb(content.hits, content);
|
||
|
|
});
|
||
|
|
},
|
||
|
|
displayKey: 'name',
|
||
|
|
templates: {
|
||
|
|
footer: function(o, content) {
|
||
|
|
return '<div class="aa-info-results">' + content.nbHits + ' results</div>';
|
||
|
|
},
|
||
|
|
suggestion: function(suggestion) {
|
||
|
|
return suggestion._highlightResult.name.value;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
]);
|
||
|
|
|
||
|
|
//////////////////////////////
|
||
|
|
|
||
|
|
$('#contacts2').autocomplete({
|
||
|
|
debug: true,
|
||
|
|
hint: false,
|
||
|
|
appendTo: 'body',
|
||
|
|
templates: {
|
||
|
|
dropdownMenu: '#my-custom-menu-template',
|
||
|
|
footer: '<div class="aa-dropdown-footer">Search by<img class="aa-logo" src="https://www.algolia.com/assets/algolia128x40.png" width=80/></div>'
|
||
|
|
}
|
||
|
|
}, [
|
||
|
|
{
|
||
|
|
source: index.ttAdapter({ hitsPerPage: 5 }),
|
||
|
|
name: 'contacts1',
|
||
|
|
templates: {
|
||
|
|
header: '<span class="aa-category-title">List 1</span>',
|
||
|
|
suggestion: function(suggestion) {
|
||
|
|
return suggestion._highlightResult.name.value;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
source: index.ttAdapter({ hitsPerPage: 2 }),
|
||
|
|
name: 'contacts2',
|
||
|
|
templates: {
|
||
|
|
header: '<span class="aa-category-title">List 2</span>',
|
||
|
|
suggestion: function(suggestion) {
|
||
|
|
return suggestion._highlightResult.name.value;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
source: index.ttAdapter({ hitsPerPage: 2 }),
|
||
|
|
name: 'contacts3',
|
||
|
|
templates: {
|
||
|
|
header: '<span class="aa-category-title">List 3</span>',
|
||
|
|
suggestion: function(suggestion, answer) {
|
||
|
|
return suggestion._highlightResult.name.value;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
]);
|
||
|
|
|
||
|
|
//////////////////////////////
|
||
|
|
|
||
|
|
function render3(suggestion) {
|
||
|
|
var name;
|
||
|
|
if (suggestion._tags[0] === 'actor') {
|
||
|
|
name = suggestion._highlightResult.actor_name.value;
|
||
|
|
} else if (suggestion._tags[0] === 'show') {
|
||
|
|
name = suggestion._highlightResult.show_name.value;
|
||
|
|
} else if (suggestion._tags[0] === 'episode') {
|
||
|
|
name = suggestion._highlightResult.episode_of.value + ' » ' + suggestion._highlightResult.episode_name.value;
|
||
|
|
}
|
||
|
|
return '<div class="media">' +
|
||
|
|
'<div class="media-left">' +
|
||
|
|
'<img src="' + suggestion.image + '" class="media-object" style="height: 3em" />' +
|
||
|
|
'</div>' +
|
||
|
|
'<div class="media-body">' +
|
||
|
|
name +
|
||
|
|
'</div>' +
|
||
|
|
'</div>';
|
||
|
|
}
|
||
|
|
|
||
|
|
function source3(tagFilters) {
|
||
|
|
return function(q, cb) {
|
||
|
|
tvshows.search(q, { hitsPerPage: 5, tagFilters: tagFilters }, function(error, content) {
|
||
|
|
if (error) {
|
||
|
|
cb([]);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
cb(content.hits);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
$('#q3').autocomplete({ debug: true, templates: { dropdownMenu: $('#menu3').text() } }, [
|
||
|
|
{
|
||
|
|
source: source3(),
|
||
|
|
name: 'all',
|
||
|
|
templates: {
|
||
|
|
suggestion: render3
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
source: source3(['actor']),
|
||
|
|
name: 'actors',
|
||
|
|
templates: {
|
||
|
|
suggestion: render3
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
source: source3(['show']),
|
||
|
|
name: 'shows',
|
||
|
|
templates: {
|
||
|
|
suggestion: render3
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
source: source3(['episode']),
|
||
|
|
name: 'episodes',
|
||
|
|
templates: {
|
||
|
|
suggestion: render3
|
||
|
|
}
|
||
|
|
}
|
||
|
|
]).on('autocomplete:selected', function(even, suggestion, dataset) {
|
||
|
|
console.log(suggestion, dataset);
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|