Answers.Body: <p>You can request any template via ajax using jQuery. jQuery would essentially listen for onChange events from the search field and ajax load a template that looped through the search results.</p>
  
  <p>The template that you request can even be the default full search results page, with a conditional that determines which part of the template gets returned if the request is ajax.</p>
  
  <pre><code>{% set query = craft.request.getParam('q') %}
  {% set entries = craft.entries.search(query).order('score') %}
  
  {% if not craft.request.isAjax %}
      {# Full page results content can go here #}
      &lt;h1&gt;Search Results&lt;/h1&gt;
      &lt;div class="search-results"&gt;
          &lt;ul&gt;
          {% for entry in entries %}
              &lt;li&gt;&lt;a href="{{ entry.url }}"&gt;{{ entry.title }}&lt;/a&gt;&lt;/li&gt;
          {% endfor %}
          &lt;/ul&gt;
      &lt;/div&gt;
  {% endif %}
  
  {% if craft.request.isAjax %}
      {# Drop-down results can go here. And inserted into DOM via jquery. #}
      {% for entry in entries %}
          &lt;li&gt;&lt;a href="{{ entry.url }}"&gt;{{ entry.title }}&lt;/a&gt;&lt;/li&gt;
      {% endfor %}
  {% endif %}
  </code></pre>
  
  <p>jQuery can then insert the results of the ajax call using an html element selector. See the jquery documentation for more information on using <a href="http://api.jquery.com/load/">.load</a> or <a href="http://api.jquery.com/jquery.ajax/">.ajax</a>.</p>
  
  <p>You will also probably want to put the <code>{% set entries ... %}</code> inside the <code>if isAjax</code> statements so that you can limit the results, or implement pagination, for the drop down vs the full page.</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-10-07T20:32:29.517Z
Answers.LastActivityDate: 2014-10-07T21:06:58.667Z
Answers.LastEditDate: 2014-10-07T21:06:58.667Z
Answers.UserDisplayName: Douglas McDonald
Body: <p>Does anyone have an example how I would implement search results that appear in a popup on the same form (without redirecting to a results page). The idea would be that as they start to type in the search bar, after a delay I'd show a popup with a few results.</p>
  
  <p>I'm good on the jS, popup part. The part i don't know about is how i would call craft cms dynamically on the same page to get the results (would i do this with JS or with the form tag, can i make the request with JSON/Ajax?). All the examples show the form directing to a results page.</p>
  
  <p>Anyone have any suggestions</p>
  
Tags: <search>
Title: Search Results In a Drop List/Popup on Same Page
ThreadText: # Search Results In a Drop List/Popup on Same Page
  
  (Asked by: username_0 on 2014-10-07)
  
  Does anyone have an example how I would implement search results that appear in a popup on the same form (without redirecting to a results page). The idea would be that as they start to type in the search bar, after a delay I'd show a popup with a few results.
  
  I'm good on the jS, popup part. The part i don't know about is how i would call craft cms dynamically on the same page to get the results (would i do this with JS or with the form tag, can i make the request with JSON/Ajax?). All the examples show the form directing to a results page.
  
  Anyone have any suggestions
  
  **Tags:** search
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2014-10-07. Score: 6 | Accepted answer
  
  You can request any template via ajax using jQuery. jQuery would essentially listen for onChange events from the search field and ajax load a template that looped through the search results.
  
  The template that you request can even be the default full search results page, with a conditional that determines which part of the template gets returned if the request is ajax.
  
  ```
  {% set query = craft.request.getParam('q') %}
  {% set entries = craft.entries.search(query).order('score') %}
  
  {% if not craft.request.isAjax %}
      {# Full page results content can go here #}
      <h1>Search Results</h1>
      <div class="search-results">
          <ul>
          {% for entry in entries %}
              <li><a href="{{ entry.url }}">{{ entry.title }}</a></li>
          {% endfor %}
          </ul>
      </div>
  {% endif %}
  
  {% if craft.request.isAjax %}
      {# Drop-down results can go here. And inserted into DOM via jquery. #}
      {% for entry in entries %}
          <li><a href="{{ entry.url }}">{{ entry.title }}</a></li>
      {% endfor %}
  {% endif %}
  
  ```
  
  jQuery can then insert the results of the ajax call using an html element selector. See the jquery documentation for more information on using [.load](http://api.jquery.com/load/) or [.ajax](http://api.jquery.com/jquery.ajax/).
  
  You will also probably want to put the `{% set entries ... %}` inside the `if isAjax` statements so that you can limit the results, or implement pagination, for the drop down vs the full page.
  
  
  ---
  
  