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 %}