jquery-typeahead
Version:
jQuery plugin that provides Typeahead (autocomplete) Search preview from Json object(s) via same domain Ajax request or cross domain Jsonp and offers data compression inside Local Storage. The plugin is built with a lot of options and callbacks to allow c
390 lines (347 loc) • 15.2 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>Typeahead Game_v3 Demo</title>
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/awesome-bootstrap-checkbox/0.3.7/awesome-bootstrap-checkbox.css">
<link rel="stylesheet" href="../../src/jquery.typeahead.css">
<link rel="stylesheet" href="game_v3.css">
<script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.js"></script>
<script src="../../src/jquery.typeahead.js"></script>
</head>
<body>
<div style="width: 100%; max-width: 1000px; margin: 0 auto;">
<h1>Game_v3 Demo</h1>
<ul>
<li>
<a href="http://www.runningcoder.org/jquerytypeahead/documentation/">Documentation</a>
</li>
<li>
<a href="http://www.runningcoder.org/jquerytypeahead/demo/">Demos</a>
</li>
<li>
Edit this demo on <a href="https://jsfiddle.net/runningcoder/14epn93f/">JsFiddle</a>
</li>
</ul>
<div class="champion-filters">
<ul>
<li>Role:</li>
<li>
<div class="checkbox checkbox-info">
<input type="checkbox" id="assassin">
<label for="assassin">
assassin
</label>
</div>
</li>
<li>
<div class="checkbox checkbox-info">
<input type="checkbox" id="fighter">
<label for="fighter">
fighter
</label>
</div>
</li>
<li>
<div class="checkbox checkbox-info">
<input type="checkbox" id="mage">
<label for="mage">
mage
</label>
</div>
</li>
<li>
<div class="checkbox checkbox-info">
<input type="checkbox" id="support">
<label for="support">
support
</label>
</div>
</li>
<li>
<div class="checkbox checkbox-info">
<input type="checkbox" id="tank">
<label for="tank">
tank
</label>
</div>
</li>
<li>
<div class="checkbox checkbox-info">
<input type="checkbox" id="marksman">
<label for="marksman">
marksman
</label>
</div>
</li>
<li>
<div class="checkbox checkbox-info">
<input type="checkbox" id="attack-10" value="10">
<label for="attack-10">
Attack 10
</label>
</div>
</li>
</ul>
<ul>
<li>
Classification:
</li>
<li>
<div class="radio radio-info radio-inline">
<input type="radio" id="classification-any" value="" name="champion-classification" checked="">
<label for="classification-any"> Any </label>
</div>
</li>
<li>
<div class="radio radio-info radio-inline">
<input type="radio" id="classification-male" value="male" name="champion-classification">
<label for="classification-male"> Male </label>
</div>
</li>
<li>
<div class="radio radio-info radio-inline">
<input type="radio" id="classification-female" value="female" name="champion-classification">
<label for="classification-female"> Female </label>
</div>
</li>
<li>
<div class="radio radio-info radio-inline">
<input type="radio" id="classification-creature" value="creature" name="champion-classification">
<label for="classification-creature"> Creature </label>
</div>
</li>
<li>
<select id="champion-difficulty-select" class="typeahead-select">
<option value="">- Difficulty -</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</li>
<li>
<div class="ui mini button clear-filters" id="clear-champion-filters">Clear Filters
</div>
</li>
</ul>
</div>
<div class="champion-form-container">
<form id="form-game_v3" name="form-game_v3">
<div class="typeahead__container">
<div class="typeahead__field">
<div class="typeahead__query">
<input class="js-typeahead"
name="game_v3[query]"
placeholder="Search"
autocomplete="off">
</div>
<div class="typeahead__button">
<button type="submit">
<i class="typeahead__search-icon"></i>
</button>
</div>
</div>
</div>
</form>
<div id="champion-counter" class="champion-counter"></div>
</div>
<div id="champion-list" class="typeahead__result champion-list detached loading"></div>
<div id="champion-modal"
class="ui modal">
<i class="close icon"></i>
<div class="image content">
<div class="ui medium image">
<img data-champion-image src=""
alt="league of legends">
</div>
<div class="description">
<div class="ui header" data-champion-name></div>
<em data-champion-title></em>
<p data-champion-blurb></p>
</div>
</div>
<div class="content">
<div class="ui header">Stats</div>
...
<div class="ui header">Video</div>
...
<div class="ui header">Skills</div>
...
</div>
<div class="actions">
<div class="ui positive right labeled icon button">
Ok !
<i class="checkmark icon"></i>
</div>
</div>
</div>
</div>
<script>
$(function () {
typeof $.typeahead === 'function' && $.typeahead({
input: ".js-typeahead",
minLength: 0,
maxItem: 0,
order: "asc",
hint: true,
resultContainer: '#champion-list',
generateOnLoad: true,
cache: true,
ttl: 3600000 * 24 * 7, // 1 week
compression: true,
dynamicFilter: [{
selector: '#assassin',
key: '|tags.Assassin'
}, {
selector: '#fighter',
key: '|tags.Fighter'
}, {
selector: '#mage',
key: '|tags.Mage'
}, {
selector: '#support',
key: '|tags.Support'
}, {
selector: '#tank',
key: '|tags.Tank'
}, {
selector: '#marksman',
key: '|tags.Marksman'
}, {
selector: '#champion-difficulty-select',
key: '&info.difficulty'
}, {
selector: '[name="champion-classification"]',
key: '&classification'
}, {
selector: '#attack-10',
key: '&info.attack'
}],
display: ["key", "name"],
template: '<span class="champion-image">' +
'<img src="//ddragon.leagueoflegends.com/cdn/6.2.1/img/champion/{{image.full}}" alt="{{name}} {{title}}">' +
'</span>' +
'<span class="champion-name">{{name}}</span>',
emptyTemplate: function (query) {
return 'No champion found' + ((query) ? ' matching "' + query + '"' : '');
},
source: {
champion: {
ajax: {
url: "https://global.api.pvp.net/api/lol/static-data/na/v1.2/champion",
dataType: "json",
data: {
champData: 'info,tags,image,blurb',
api_key: '4a9e144c-33b6-4283-98a8-378e0d58b8ab'
},
callback: {
done: function (data) {
if (!(data instanceof Array)) {
data = $.map(data.data, function (value, index) {
for (var type in classification) {
if (!classification.hasOwnProperty(type)) continue;
if (~classification[type].indexOf(value.key)) {
value.classification = type;
break;
}
}
var tags = {};
for (var i = 0; i < value.tags.length; i++) {
tags[value.tags[i]] = true;
}
value.tags = tags;
return value;
});
}
return data;
}
}
}
}
},
callback: {
onReady: function (node) {
$('#launch-game-v3-demo').addClass('hidden');
$('#game-v3-demo-container').removeClass('hidden');
},
onResult: function (node, query, result, resultCount) {
$('#champion-counter').text(resultCount + ' champions');
},
onClickBefore: function (node, a, item, event) {
event.preventDefault();
$('#champion-modal [data-champion-image]').attr({
'src': '//ddragon.leagueoflegends.com/cdn/5.13.1/img/champion/' + item.image.full,
'alt': 'league of legends champion ' + item.name
});
$('#champion-modal [data-champion-name]').text(item.name)
$('#champion-modal [data-champion-title]').text(item.title)
$('#champion-modal [data-champion-blurb]').text(item.blurb)
$('#champion-modal').modal('show');
},
onLayoutBuiltBefore: function (node, query, result, resultHtmlList) {
var roles;
for (var i = 0; i < result.length; i++) {
roles = [];
for (role in result[i].tags) {
if (!result[i].tags.hasOwnProperty(role)) continue;
roles.push(role);
}
resultHtmlList.find('li:eq(' + i + ')').popup({
position: "left center",
html: "<ul>" +
"<li>Role(s): " + roles.join(", ") + "</li>" +
"<li>Classification: " + result[i].classification + "</li>" +
"<li>Difficulty: " + result[i].info.difficulty + "</li>" +
"</ul>"
});
}
return resultHtmlList;
}
}
});
var classification = {
male: [
'Tryndamere', 'Gragas', 'Ryze', 'Olaf', 'Viktor', 'Garen', 'Singed', 'Zed',
'Darius', 'Vayne', 'Varus', 'Jayce', 'Pantheon', 'Corki', 'Azir', 'Graves', 'Malzahar', 'Kayle', 'LeeSin', 'Nunu',
'TwistedFate', 'Jax', 'Vladimir', 'Quinn', 'Lucian', 'Yasuo', 'Draven', 'Swain', 'Talon', 'Ekko', 'Zilean', 'Braum',
'XinZhao', 'MasterYi', 'Taric', 'Gangplank', 'JarvanIV', 'Ezreal', 'Udyr'
],
female: [
'Cassiopeia', 'Poppy', 'Annie', 'Karma', 'Lux', 'Ahri', 'Lissandra', 'Morgana', 'Evelynn', 'Sona', 'Katarina',
'Lulu', 'Ashe', 'Leona', 'Syndra', 'Riven', 'Caitlyn', 'Nidalee', 'Vi', 'Irelia', 'Elise', 'Shyvana', 'Kalista',
'Diana', 'Sejuani', 'Akali', 'Sivir', 'Janna', 'Orianna', 'Fiora', 'Leblanc', 'Jinx', 'MissFortune', 'Zyra', 'Nami'
],
creature: [
'Anivia', 'Maokai', 'Fizz', 'Heimerdinger', 'Rumble', 'Mordekaiser', 'KogMaw', 'Karthus', 'Alistar', 'Khazix',
'Galio', 'Kennen', 'Veigar', 'Bard', 'Gnar', 'Volibear', 'DrMundo', 'Brand', 'Zac', 'RekSai', 'Tristana', 'Hecarim',
'Rengar', 'Warwick', 'Skarner', 'Malphite', 'Xerath', 'Teemo', 'Nasus', 'Renekton', 'Shaco', 'Ziggs', 'FiddleSticks',
'Rammus', 'Chogath', 'Soraka', 'Nocturne', 'Yorick', 'Urgot', 'MonkeyKing', 'Blitzcrank', 'Shen', 'Twitch', 'Amumu',
'Trundle', 'Kassadin', 'Velkoz', 'Aatrox', 'Thresh', 'Sion', 'Nautilus'
]
};
$('#clear-champion-filters').on('click', function () {
// Visually reset filters
$('.champion-filters select').find('option').prop("selected", false);
$('.champion-filters input[type="checkbox"]').prop("checked", false);
$('.champion-filters input[type="radio"]').prop("checked", false).first().prop("checked", true);
// Clear dynamic filters inside Typeahead "game_v3-query" instance, at this point you know what you are doing.
Typeahead['.js-typeahead'].filters.dynamic = {};
// Trigger a manual search
$('.js-typeahead').trigger('input.typeahead');
});
});
</script>
</body>
</html>