<p>You wouldn't need to create or build a module, you can simply create the functionality with twig itself and use queries in the twig template:</p>
<p><a href="https://craftcms.com/knowledge-base/search-form" rel="nofollow noreferrer">https://craftcms.com/knowledge-base/search-form</a></p>
<p>If you want a live search you can use the sprig plugin and follow this:</p>
<p><a href="https://putyourlightson.com/sprig/cookbook#search" rel="nofollow noreferrer">https://putyourlightson.com/sprig/cookbook#search</a></p>

CC BY-SA 4.0
2022-12-15T22:25:50.240Z
Wow! I didn't expect it to be done so easily in this engine) tnx)))
Dimi
CC BY-SA 4.0
2022-12-15T13:53:03.663Z
2022-12-15T13:53:03.663Z
Michael Thomas
<p>I had a website on an old engine. And there I had a live search organized. Now I have decided to change the engine to CRAFT CMS and, accordingly, I need to organize a live search on the new engine.
I'll tell you how the live search was organized on the OLD ENGINE</p>
<p><strong>On the old engine</strong> I had this HTML structure:</p>
<pre><code>&lt;form action=&quot;/games/&quot; method=&quot;get&quot;&gt;
    &lt;div class=&quot;form&quot;&gt;
        &lt;input placeholder=&quot;Name&quot; type=&quot;text&quot; name=&quot;title&quot; id=&quot;search_text&quot;&gt;
        &lt;button&gt;GO&lt;/button&gt;
    &lt;/div&gt;
    &lt;div id=&quot;results&quot; class=&quot;search_results&quot;&gt;&lt;/div&gt;
&lt;/form&gt;
</code></pre>
<p><strong>On the old engine</strong>, I had this JQUERY handle:</p>
<pre><code>$(&quot;#search_text&quot;).bind(&quot;keyup&quot;, function() {
    if(this.value.length &gt;= 1){
        var searchString = $(this).val();
        var data = 'search='+ searchString;
        if(searchString) {
            $.ajax({
                type: 'POST',
                url: &quot;/functions/fast_search_result.php&quot;,
                data: data,
                success: function(html){
                    $(&quot;#results&quot;).addClass(&quot;infocus&quot;);
                    $(&quot;#results&quot;).html(html);
                }
            });
        }
    }else{
    $(&quot;#results&quot;).html('');
}
});
</code></pre>
<p><strong>On the old engine</strong>, the file code <strong>fast_search_result.php</strong> was like this:</p>
<pre><code>&lt;?php
    $search_text = $_POST['search'];

    $link = mysqli_connect('localhost', 'user', '123456789', 'name_db');

    $sql = mysqli_query($link, &quot;SELECT `title`, `url` FROM `games` WHERE `title` LIKE `%&quot;.$search_text.&quot;%` &quot;);
    $results = mysqli_fetch_array($sql);
    foreach($results as $result){

        $title = $result['title'];
        $url = &quot;/link/to/my/game/&quot;.$result['url'].&quot;/&quot;;

        echo &quot;&lt;div class='game'&gt;&quot;;
            echo &quot;&lt;a href='&quot;.$url.&quot;' class='name'&gt;&quot;.$title.&quot;&lt;/a&gt;&quot;;
        echo &quot;&lt;/div&gt;&quot;;

    }
?&gt;
</code></pre>
<p>That's the same thing I want to organize on CRAFT CMS. But only how to do it? I'm new to CRAFT CMS, I have an idea how to do it:</p>
<ol>
<li>in the TWIG template, organize the form</li>
<li>Build a module that, when passing a POST to it, will work out this post and return the result. The module will work by URL, for example, /module/fast_search_result/</li>
<li>Well, leave the jquery handler the same, replacing in it only the path by which I will process the POST</li>
</ol>
<p>If my idea is wrong or there is an easier way, please tell me. I will be glad)</p>

<craft3>
How to organize a live search on a website?
# How to organize a live search on a website?

(Asked by: username_0 on 2022-12-15)

I had a website on an old engine. And there I had a live search organized. Now I have decided to change the engine to CRAFT CMS and, accordingly, I need to organize a live search on the new engine.
I'll tell you how the live search was organized on the OLD ENGINE
On the old engine I had this HTML structure:

    
        
        GO
    
    


On the old engine, I had this JQUERY handle:
$("#search_text").bind("keyup", function() {
    if(this.value.length >= 1){
        var searchString = $(this).val();
        var data = 'search='+ searchString;
        if(searchString) {
            $.ajax({
                type: 'POST',
                url: "/functions/fast_search_result.php",
                data: data,
                success: function(html){
                    $("#results").addClass("infocus");
                    $("#results").html(html);
                }
            });
        }
    }else{
    $("#results").html('');
}
});

On the old engine, the file code fast_search_result.php was like this:
";
            echo "".$title."";
        echo "";

    }
?>

That's the same thing I want to organize on CRAFT CMS. But only how to do it? I'm new to CRAFT CMS, I have an idea how to do it:

in the TWIG template, organize the form
Build a module that, when passing a POST to it, will work out this post and return the result. The module will work by URL, for example, /module/fast_search_result/
Well, leave the jquery handler the same, replacing in it only the path by which I will process the POST

If my idea is wrong or there is an easier way, please tell me. I will be glad)

**Tags:** craft3


---

## 1 answers

### Answer by username_1 on 2022-12-15. Score: 2 | Accepted answer

You wouldn't need to create or build a module, you can simply create the functionality with twig itself and use queries in the twig template:

<https://craftcms.com/knowledge-base/search-form>

If you want a live search you can use the sprig plugin and follow this:

<https://putyourlightson.com/sprig/cookbook#search>

> **Comments:**
> **username_0**: Wow! I didn't expect it to be done so easily in this engine) tnx)))  

---

