<p>You can create your own search...
lets say this is your html</p>

<pre><code>&lt;input type="input" id="searchTags" placeholder="Search"&gt;
&lt;input type="button" id="startSearch" value="Go"&gt;
&lt;div id="results"&gt;&lt;/div&gt;
</code></pre>

<p>then you have the following script:</p>

<pre><code>$("#startSearch").click(function(){
    var data = {
        action: 'pluginhandle/controller/searchEntries',
        options: $("#searchTags").val()
    };
    $.ajax({
       type: "post",
       url: '/',
       data: data,
       success: function(response){
       // replace content from $("#results") with your new html
       },
    ....
   });
});
</code></pre>

<p>Your controller would look like</p>

<pre><code>public function actionSearchEntry(){ 
     $criteria = new ElementCriteriaModel(ElementType::Entry);     
     // build your criteriaModel based on your needs
     $html = $this-&gt;renderTemplate('results.twig', array(
         'entries' =&gt; $criteria-&gt;find()
     ));
     return $this-&gt;returnJson($html);
}
</code></pre>

<p>your results.twig would be like</p>

<pre><code>{% if entries is defined and entries|length %}
    &lt;ul&gt;
        {% for entry in entries %}
            &lt;li&gt;
                {{ entry.title }}
            &lt;/li&gt;
        {% endfor %}
    &lt;/ul&gt;
{% endif %}
</code></pre>

CC BY-SA 3.0
2017-10-17T10:26:29.230Z
Hi Brad! Thanks for the reply. So I need to create my own plugin to accomplish this?
Billy Sengsey
CC BY-SA 3.0
2017-10-17T12:43:24.537Z
The answer was mine - Brad just edited it because I messed up formatting.
I`m not sure if there is a craft build in way to accomplish it. Maybe there is and Brad could tell us - but I never used it. You are more flexible if you create your own plugin. All in all I made about 20 pages different pages with craft and none of them without a custom plugin. It is really easy, fast and you have more control.
Robin Schambach
CC BY-SA 3.0
2018-03-08T08:50:28.610Z
Hi @Robin Schambach, I'm trying to set up the code in your example. I made a plugin via pluginfactory.io (I've never made a Craft plugin before) and I made the controller just like this example. The JS code gives me an error (Requested page not found. [404]). My JS file is in the public folder and my results.twig page is at the root in my templates folder. Could you please help me out? I would really like this to work
Billy Sengsey
CC BY-SA 3.0
2018-03-08T08:58:46.133Z
could you please come here https://chat.stackexchange.com/rooms/74190/plugin-developement it can have 1000 reasons so it's better to chat in the room
Robin Schambach
CC BY-SA 3.0
2017-10-16T15:22:14.070Z
2017-10-16T23:23:04.903Z
2017-10-16T23:23:04.903Z
Robin Schambach
<p>So I've been following the <a href="https://craftcms.com/docs/templating/search-form" rel="nofollow noreferrer">docs</a> on how to create a search form in Craft and it works fine. But instead of having a results.twig page I would like to have just one index page and get all the results with AJAX. Is there a simple way to accomplish this in Craft? And if so, does anyone have an example?</p>

<search><ajax><jquery>
Simple AJAX search form
# Simple AJAX search form

(Asked by: username_0 on 2017-10-16)

So I've been following the [docs](https://craftcms.com/docs/templating/search-form) on how to create a search form in Craft and it works fine. But instead of having a results.twig page I would like to have just one index page and get all the results with AJAX. Is there a simple way to accomplish this in Craft? And if so, does anyone have an example?

**Tags:** search, ajax, jquery


---

## 1 answers

### Answer by username_1 on 2017-10-16. Score: 2

You can create your own search...
lets say this is your html




then you have the following script:
$("#startSearch").click(function(){
    var data = {
        action: 'pluginhandle/controller/searchEntries',
        options: $("#searchTags").val()
    };
    $.ajax({
       type: "post",
       url: '/',
       data: data,
       success: function(response){
       // replace content from $("#results") with your new html
       },
    ....
   });
});

Your controller would look like
public function actionSearchEntry(){ 
     $criteria = new ElementCriteriaModel(ElementType::Entry);     
     // build your criteriaModel based on your needs
     $html = $this->renderTemplate('results.twig', array(
         'entries' => $criteria->find()
     ));
     return $this->returnJson($html);
}

your results.twig would be like
{% if entries is defined and entries|length %}
    
        {% for entry in entries %}
            
                {{ entry.title }}
            
        {% endfor %}
    
{% endif %}

> **Comments:**
> **username_0**: Hi Brad! Thanks for the reply. So I need to create my own plugin to accomplish this?  
> **username_1**: The answer was mine - Brad just edited it because I messed up formatting. I`m not sure if there is a craft build in way to accomplish it. Maybe there is and Brad could tell us - but I never used it. You are more flexible if you create your own plugin. All in all I made about 20 pages different pages with craft and none of them without a custom plugin. It is really easy, fast and you have more control.  
> **username_0**: Hi @username_1, I'm trying to set up the code in your example. I made a plugin via pluginfactory.io (I've never made a Craft plugin before) and I made the controller just like this example. The JS code gives me an error (Requested page not found. [404]). My JS file is in the public folder and my results.twig page is at the root in my templates folder. Could you please help me out? I would really like this to work  
> **username_1**: could you please come here https://chat.stackexchange.com/rooms/74190/plugin-developement it can have 1000 reasons so it's better to chat in the room  

---

