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

<p>Some thoughts towards an answer, as you asked: </p>

<ul>
<li><p>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.</p></li>
<li><p>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.</p></li>
<li><p>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.</p>

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

CC BY-SA 3.0
2017-06-13T11:32:34.210Z
2017-06-13T11:32:34.210Z
narration_sd
<p>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:</p>

<p><strong>templates/search/index.html</strong></p>

<pre><code>{% block content %}

    &lt;h3&gt;Basic Search&lt;/h3&gt;

            &lt;form class="form-inline"
                  id="searchform"
                  data-applicationId="{{ craft.searchPlus.getAlgoliaApplicationId }}"
                  data-searchApiKey="{{ craft.searchPlus.getAlgoliaSearchApiKey }}"
                  data-index="products"&gt;

                &lt;div class="form-group"&gt;
                    &lt;label for="searchinput"&gt;Search&lt;/label&gt;
                    &lt;input type="search" class="form-control" id="searchinput" placeholder="Search.." autocomplete="off"&gt;
                &lt;/div&gt;
            &lt;/form&gt;

            &lt;div id="results"&gt;&lt;/div&gt;
            &lt;div id="pagination"&gt;&lt;/div&gt;

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

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

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


        &lt;/script&gt;
    {% 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 %}
</code></pre>

<plugin-development><plugins><plugin-searchplus>
Search Page with Search Plus
# Search Page with Search Plus

(Asked by: username_0 on 2017-06-13)

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

    Basic Search

            

                
                    Search
                    
                
            

            
            

    {% raw %}
        
        

        
        

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

**Tags:** plugin-development, plugins, plugin-searchplus

---

## 1 answers

### Answer by username_1 on 2017-06-13. Score: 3 | Accepted answer

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.


---

