Adding a search capability to a Hugo website

Today, I added a way to search for content in frankcontrepois.com simply by adding the following lines to my Hugo header.

<div class="input-group">
    <input id='search-input' type="text" class="form-control" placeholder="Search for...">
    <span class="input-group-btn">
        <button id='search-button' class="btn btn-default">Go!</button>
    </span>
</div>
<script type="text/javascript">
    var button = document.getElementById('search-button');
    var input = document.getElementById('search-input');

    function performSearch() {
        var query = '?q=site%3Afrankcontrepois.com+' + encodeURIComponent(input.value);
        window.open('https://duckduckgo.com/' + query, '_blank');
    }

    button.onclick = performSearch;

    input.addEventListener('keydown', function(event) {
        if (event.key === 'Enter') {
            performSearch();
        }
    });
</script>
comments powered by Disqus