Search Page with Search Plus

Question

I've got SearchPlus working great on my Craft localhost. But what I'm trying to achieve is making it so that when you type in the navigation bar (_layout) from any page it'll jump onto a search results page and display the results there. I've not got a clue how to go about achieving this, any direction or help would be great. My current setup is as follows:

templates/search/index.html

{% block content %}

    <h3>Basic Search</h3>

            <form class="form-inline"
                  id="searchform"
                  data-applicationId="{{ craft.searchPlus.getAlgoliaApplicationId }}"
                  data-searchApiKey="{{ craft.searchPlus.getAlgoliaSearchApiKey }}"
                  data-index="products">

                <div class="form-group">
                    <label for="searchinput">Search</label>
                    <input type="search" class="form-control" id="searchinput" placeholder="Search.." autocomplete="off">
                </div>
            </form>

            <div id="results"></div>
            <div id="pagination"></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 %}

Answer 1

This sounds possibly a little awkward, depending on what you may mean by 'jumps onto a search results page'.

Some thoughts towards an answer, as you asked:

• actually opening a second page is going to remove you from present context, and raise also the question of getting back if the search results aren't used.

• you could arrange something happening on typing in the search box by a javascript event on the typing, likely. Probably some issue with transferring what's already typed into such a page, especially with not missing anything being typed while it happens.

• a better plan would likely be a Garnish (Craft's ui framework) or other Javascript scrolling modal coming from the original page, no change in url. This might possibly be arranged so that the typing box stays the same, while Algolia results appear in the modal.

  • Vuejs might be of use in this modal idea, as it handles events and transfer of watched information (the typing) in its framework.