The Basic search template for SearchPlus. See it in action at http://demos.squarebit.co.uk/search/basic or read about the details at http://squarebit.co.uk/software/craft/searchplus/docs/frontend-setup

searchplus-basic.html

{% extends 'search/_layouts/main' %}

{% block content %}
    <h3>Basic Search</h3>
    <div class="row">
        <div class="col-md-3">
            <div class="well">
                <p>This is a simple example of the most basic SearchPlus setup. It consists of just a single search input.</p>
            </div>
        </div>
        <div class="col-md-9">

            <form class="form-inline"
                  id="searchform"
                  data-applicationId="{{ craft.searchPlus.getAlgoliaApplicationId }}"
                  data-searchApiKey="{{ craft.searchPlus.getAlgoliaSearchApiKey }}"
                  data-index="demo_products">
                <p><em>Our demo index contains 10,000 items or product data. Try searching for 'apple'..</em>.</p>

                <div class="form-group">
                    <label for="searchinput" class="col-md-8 sr-only control-label">Search</label>
                    <div class="col-md-8">
                        <input type="search" class="form-control" id="searchinput" placeholder="Search.." autocomplete="off">
                    </div>
                </div>
            </form>
            <hr/>

            <div id="results"></div>
            <div id="pagination"></div>
        </div>
    </div>

    {% raw %}
        <!-- Hit template -->
        <script type="text/template" id="hit-template">
            <ul>
                {{#hits}}
                <li>
                    <h4><a href="{{ uri }}">{{{ _highlightResult.name.value }}}</a></h4>
                    {{{ description }}}
                </li>
                {{/hits}}
            </ul>
        </script>

        <!-- No-Results template -->
        <script type="text/template" id="no-results-template">
            <div id="no-results-message" class="well">
                <p>Sorry, We didn't find any results for the search <em>"{{ query }}"</em>.</p>
            </div>
        </script>

        <!-- Pagination template -->
        <script type="text/template" id="pagination-template">
            <nav>
                <ul class="pagination">
                    <li {{^prev_page}}class="disabled" {{/prev_page}}>
                    <a href="#" {{#prev_page}}class="go-to-page" data-page="{{ prev_page }}" {{/prev_page}}><
                    </a></li>
                    {{#pages}}
                    <li class="{{#current}}active{{/current}} {{#disabled}}disabled{{/disabled}}">
                        <a href="#" {{^disabled}} class="go-to-page" data-page="{{ number }}" {{/disabled}}>{{ number }}
                        </a></li>
                    {{/pages}}
                    <li {{^next_page}}class="disabled" {{/next_page}}>
                    <a href="#" {{#next_page}}class="go-to-page" data-page="{{ next_page }}" {{/next_page}}>></a>
                    </li>
                </ul>
            </nav>


        </script>
    {% endraw %}
{% endblock %}

{% set searchPlusJs %}
    (function() {
        $(this).searchplus();
    })();
{% endset %}

{% includeJsFile url('//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js') %}
{% includeJsFile resourceUrl('searchplus/js/searchplus-combined.min.js') %}
{% includeJs searchPlusJs %}