Skip to content

Instantly share code, notes, and snippets.

@internetsadboy

internetsadboy/index.html

Last active August 29, 2015 14:26
Show Gist options
  • Save internetsadboy/3534c0ae512f6fcd8635 to your computer and use it in GitHub Desktop.
Save internetsadboy/3534c0ae512f6fcd8635 to your computer and use it in GitHub Desktop.
Download ZIP
Multi-category Autocomplete w/ PHP
Raw
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Algolia - Multi-category Autocomplete</title>
<style type="text/css">
.twitter-typeahead { width: 100%; }
.twitter-typeahead .tt-input, .twitter-typeahead .tt-hint { width: 100%; margin: 0px; padding: 8px 12px; border: 2px solid #ccc; outline: none; }
.twitter-typeahead .tt-input:focus { border: 2px solid #0097cf; }
.twitter-typeahead .tt-hint { color: #999; }
.twitter-typeahead .tt-dropdown-menu { width: 100%; padding: 0; background-color: #fff; border: 1px solid rgba(0, 0, 0, 0.2); border-top: 0px; }
.twitter-typeahead .tt-dropdown-menu .tt-suggestion { text-align: left; padding: 3px 20px; font-size: 18px; line-height: 24px; }
.twitter-typeahead .tt-dropdown-menu .tt-suggestion.tt-cursor { color: #fff; background-color: #0097cf; }
.twitter-typeahead .tt-dropdown-menu .tt-suggestion p { margin: 0; }
.twitter-typeahead .tt-dropdown-menu .tt-suggestion a { color: #000; text-decoration: none; }
.twitter-typeahead .tt-dropdown-menu .tt-suggestion em { font-weight: bold; font-style: normal; }
</style>
</head>
<body>
<input class="typeahead" type="text" placeholder="Search for players or teams" id="player-search" spellcheck="false" />
<!-- Resources -->
<script src="https://cdn.jsdelivr.net/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/typeahead.js/0.10.5/typeahead.jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/hogan.js/3.0.2/hogan.min.js"></script>
<!-- Algolia JS client -->
<script src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>
<script type="text/javascript">
$(document).ready(function onReady () {
var client = algoliasearch('YourAppId', 'YourSearchOnlyAPIKey');
var teams = client.initIndex('teams_idx');
var players = client.initIndex('players_idx');
// Mustache templating by Hogan.js (http://mustache.github.io/)
var templatePlayer = Hogan.compile('<div class="player">' +
'<div class="name">{{{ _highlightResult.name.value }}} <small>({{ points }})</small></div>' +
'<div class="team">{{{ _highlightResult.team.value }}}</div>' +
'</div>');
var templateTeam = Hogan.compile('<div class="team">' +
'<div class="name">{{{ _highlightResult.name.value }}}</div>' +
'<div class="location">{{{ _highlightResult.location.value }}}</div>' +
'</div>');
// typeahead.js initialization
$('#player-search').typeahead({hint: false}, [{
source: teams.ttAdapter({hitsPerPage: 3}),
displayKey: 'name',
templates: {
header: '<div class="category">Teams</div>',
suggestion: function(hit) {
return templateTeam.render(hit);
}
}
}, {
source: players.ttAdapter({hitsPerPage: 5}),
displayKey: 'name',
templates: {
header: '<div class="category">Players</div>',
suggestion: function(hit) {
return templatePlayer.render(hit);
}
}
}
]);
});
</script>
</body>
</html>
Raw
index.php
<?php
require_once '../algoliasearch.php';
$client = new \AlgoliaSearch\Client('YourAppId', 'YourAPIKey');
// Initialize teams index
$client->initIndex("teams_idx")->setSettings(
array("attributesToIndex" => array("name", "location"), "customRanking" => array("asc(name)"))
);
// Initialize players index
$client->initIndex("players_idx")->setSettings(
array("attributesToIndex" => array("name", "team"), "customRanking" => array("desc(points)"))
);
?>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment