Game_v3 Typeahead search

runningcoder typeahead demo game_v3

by Tom Bertrand

HTML

<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>
<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">
<script src="https://cdn.rawgit.com/running-coder/jquery-typeahead/develop/src/jquery.typeahead.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/running-coder/jquery-typeahead/develop/src/jquery.typeahead.css">
<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>
    </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">
                   ...

CSS

#form-game_v3 {
    width: 50%;
    margin: 0 auto 20px;
}

.tab-content.champion {
    overflow: inherit;
}

.champion-form-container {
    position: relative;
}

#champion-list {
    position: relative;
    z-index: 1;
}

#champion-list .typeahead-list {
    padding: 0;
}

#champion-list .typeahead-list:not(.empty) > li {
    border-left: 1px solid #fff;
    border-top: 1px solid #fff;
    border-right: 1px solid #d7d7d7;
    border-bottom: 1px solid #d7d7d7;
    background-color: #efefef;
    padding: 5px;
    display: inline-block;
    text-align: center;
}

#champion-list .typeahead-list > li > a {
    padding: 6px 10px;
}

#champion-list .champion-image {
    display: block;
}

#champion-list .champion-image img {
    width: 60px;
    height: 60px;
    text-align: center;
    display: inline-block;
}

#champion-list .champion-name {
    font-size: 13px;
}

#champion-modal em {
    font-style: italic;
    display: block;
    margin-bottom: 10px;
}

.champion-counter {
    font-size: 12px;
    position: absolute;
    bottom: 0;
}

.champion-filters .checkbox input[type=radio]:checked+label::after,
.champion-filters .checkbox input[type=checkbox]:checked+label::after {
    font-family: Icons;
    content: "\f00c";
}

.champion-filters {
    margin-bottom: 20px;
    position: relative;
    width: 100%;
    list-style: none;
    font-size: 13px;
    text-align: left;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 2px;
    background-clip: padding-box;
}

.champion-filters > ul {
    padding: 10px;
    display: inline-block;
}

.champion-filters > ul > li {
    display: inline-block;
    padding-right: 30px;
}

.champion-filters label {
    cursor: pointer;
}

.popup ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

JavaScript

$(function () {

    typeof $.typeahead === "function" && $.typeahead({
        input: "#game_v3-query",
        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: {
                url: [
                    {
                        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'
                        },
                  ...