<div class="container oi-container">
    <div class="row">
        <div class="offset-md-4 col-md-4">
            <form class="md-form">
                <div class="input-group">
                    <input type="text" id="oi-query" class="form-control" name="oi-query" autocomplete="off" spellcheck="false" maxlength="127" dir="ltr" />
                    <div class="input-group-addon"><i class="mdi mdi-magnify" aria-hidden="true"></i></div>
                    <label for="oi-query">Zoeken</label>
                </div>
                <div id="oi-spellcheck"></div>
            </form>
        </div>
    </div>

    <div class="row">
        <div class="col-md-2">
            <div class="oi-facet-constraints" id="oi-facet-cat"></div>
            <div class="oi-facet-constraints" id="oi-facet-date"></div>
            <div class="oi-facet-constraints" id="oi-facet-type"></div>
        </div>
        <div class="offset-md-1 col-md-9">
            <p id="oi-header"></p>
            <div id="oi-results"></div>
            <div id="oi-pager"></div>
        </div>
    </div>

    <div class="row">
        <div class="offset-md-4 col-md-4">
            <div id="oi-trending-results"></div>
        </div>
    </div>
</div>

Status: WIP

Using the search in HTML

To make the search work properly we need to initialize it and connect to OpenIndex, so place underneath JavaScript just before the closing BODY element and after the jQuery script tag:

<script type="text/javascript" src="//www.openindex.io/js/openindex.69694b9315763c81.js"></script>
<script type="text/javascript">
$(function() {
    openindex.preCallback = function(q) {
        if (q && q.length > 0) {
            var fld = $('label[for="' + openindex.store.inputField.replace('#', '') + '"]');
            if (fld.length) {
                fld.addClass('active');
            }
        }
    };

    //Geen result icons tonen (want die zijn nog niet gedefinieerd)
    openindex.result.icons=false;
    openindex.result.defaultIcon=false;

    //Trending pages vertaling
    openindex.trending.header = "Veel gezocht";

    //Titeltekst bij ontbrekende titels
    openindex.result.defaultTitle = "Geen titel";

    //Spellcheck vertaling
    openindex.spell.spellcheckFollow = "Geen resultaten gevonden voor <span>%QUERY%</span>, resultaten voor <span>%SUGGEST%</span> worden getoond.";
    openindex.spell.spellcheckSuggest = "Bedoelt u %SUGGEST%?";

    // Datum sinds.. vertalingen
    openindex.result.timeSinceFormat = "%AMOUNT% %UNIT% geleden";
    openindex.result.timeSinceMapping = {
        "now": "nu",
        "today": "vandaag",
        "yesterday": "gisteren",
        "seconds": "seconden",
        "minutes": "minuten",
        "hours": "uur",
        "days": "dagen",
        "weeks": "weken",
        "months": "maanden",
        "years": "jaren"
    };

    openindex.type.multiSelect = true;
    openindex.cat.multiSelect = false;

    openindex.suggest.development = false;
    openindex.suggest.rows = 8; /* MIN: 2 and MAX: 8, DEFAULT: 4*/
    openindex.result.showTimeSince = true;
    openindex.result.removeFromTitle = / \| Gemeente nijmegen/gi;
    openindex.trending.removeFromTitle = / \| Gemeente nijmegen/gi;
    openindex.spell.autoFollowSuggest = true;

    openindex.cat.header = "Categorie";
    openindex.date.header = "Periode";
    openindex.type.header = "Bestandstype";
    openindex.pager.rows = 5;
    openindex.pager.prevLabel = "<i class=\"mdi mdi-chevron-left\" aria-hidden=\"true\"></i>";
    openindex.pager.nextLabel = "<i class=\"mdi mdi-chevron-right\" aria-hidden=\"true\"></i>";
    openindex.pager.manyResults = "Zoekresultaten voor \"%QUERY%\"";
    openindex.pager.noResults = "Geen resultaten gevonden voor \"%QUERY%\"";
    openindex.pager.fewResults = "%TOTAL% resultaten gevonden";
    openindex.pager.oneResult = "Exact 1 resultaat gevonden";
    openindex.spell.spellcheckSuggest = "Bedoelde u %SUGGEST%?";

    openindex.date.mapping =
    {
        "week" : "Deze week",
        "today" : "Vandaag",
        "month" : "Deze maand"
    };

    openindex.type.mapping =
    {
        "text/html" : "Webpagina",
        "application/pdf" : "PDF bestand",
        "application/document" : "Document"
    };
});
</script>