diff --git a/resources/js/search.js b/resources/js/search.js
index 6e329b248..769f0e5c3 100644
--- a/resources/js/search.js
+++ b/resources/js/search.js
@@ -2,29 +2,54 @@ import algoliasearch from 'algoliasearch/lite';
 
 const client = algoliasearch(process.env.MIX_ALGOLIA_APP_ID, process.env.MIX_ALGOLIA_SECRET);
 
-window.search = (event) => {
-    // If the input is empty, return no results.
-    if (event.target.value.length === 0) {
-        return Promise.resolve({ hits: [] });
-    }
-
-    // Perform the search using the provided input.
-    return client.multipleQueries([
-        {
-            indexName: process.env.MIX_ALGOLIA_THREADS_INDEX,
-            query: event.target.value,
-            params: {
-                hitsPerPage: 5,
-                attributesToSnippet: ['body:10'],
+window.searchConfig = () => {
+    return {
+        show: false,
+        threads: {
+            total: 0,
+            formattedTotal: function () {
+                return `${this.total} ${this.total === 1 ? 'Result' : 'Results'}`;
             },
+            threads: [],
         },
-        {
-            indexName: process.env.MIX_ALGOLIA_ARTICLES_INDEX,
-            query: event.target.value,
-            params: {
-                hitsPerPage: 5,
-                attributesToSnippet: ['body:10'],
+        articles: {
+            total: 0,
+            formattedTotal: function () {
+                return `${this.total} ${this.total === 1 ? 'Result' : 'Results'}`;
             },
+            articles: [],
+        },
+        search: async function (query) {
+            // If the input is empty, return no results.
+            if (query.length === 0) {
+                return Promise.resolve({ hits: [] });
+            }
+
+            // Perform the search using the provided input.
+            const { results } = await client.multipleQueries([
+                {
+                    indexName: process.env.MIX_ALGOLIA_THREADS_INDEX,
+                    query: query,
+                    params: {
+                        hitsPerPage: 5,
+                        attributesToSnippet: ['body:10'],
+                    },
+                },
+                {
+                    indexName: process.env.MIX_ALGOLIA_ARTICLES_INDEX,
+                    query: query,
+                    params: {
+                        hitsPerPage: 5,
+                        attributesToSnippet: ['body:10'],
+                    },
+                },
+            ]);
+
+            this.show = true;
+            this.threads.total = results[0].nbHits;
+            this.threads.threads = results[0].hits;
+            this.articles.total = results[1].nbHits;
+            this.articles.articles = results[1].hits;
         },
-    ]);
+    };
 };
diff --git a/resources/views/_partials/_search.blade.php b/resources/views/_partials/_search.blade.php
index e04939797..6a457b77e 100644
--- a/resources/views/_partials/_search.blade.php
+++ b/resources/views/_partials/_search.blade.php
@@ -1,4 +1,4 @@
-<div x-data="{ results: false, threads: [], articles: [] }">
+<div x-data="searchConfig()">
     <label for="search" class="sr-only">Search</label>
 
     <div class="relative">
@@ -7,8 +7,9 @@
         </div>
 
         <input 
-            @click.outside="results = false" 
-            @keyup="window.search(event).then(function({ results: hits }) { results = true; threads = hits[0].hits; articles = hits[1].hits; })" 
+            @click.outside="show = false" 
+            @keyup.escape="show = false"
+            @keyup="search(event.target.value)"
             type="search" 
             name="search" 
             id="search" 
@@ -16,56 +17,54 @@ class="border-0 border-t border-b block pl-10 border-gray-300 md:border md:round
             placeholder="Search for threads and articles..."
         />
 
-        <template x-if="results">
-            <div class="search absolute md:origin-top-right md:right-0 md:rounded md:shadow-lg bg-white md:mt-2 z-50">
-                <div class="flex flex-col md:flex-row">
-                    <div class="w-full flex-none border-r border-b md:w-1/2">
-                        <div class="flex text-lg font-medium border-b p-4">
-                            <span class="text-gray-900 mr-3">Threads</span>
+        <div x-show="show" x-cloak class="search absolute md:origin-top-right md:right-0 md:rounded md:shadow-lg bg-white md:mt-2 z-50">
+            <div class="flex flex-col md:flex-row">
+                <div class="w-full flex-none border-r border-b md:w-1/2">
+                    <div class="flex text-lg font-medium border-b p-4">
+                        <span class="text-gray-900 mr-3">Threads</span>
 
-                            <span class="text-gray-300" x-text="threads.length + ' Results'"></span>
-                        </div>
-
-                        <div class="max-h-72 overflow-y-scroll">
-                            <template x-for="thread in threads" :key="thread.subject">
-                                <a :href="'/forum/'+thread.slug" class="flex flex-col px-4 py-2 hover:bg-lio-100">
-                                    <span class="text-black-900 text-lg font-medium break-all" x-html="thread._highlightResult.subject.value"></span>
-                                    <span class="text-black-900 break-all" x-html="thread._snippetResult.body.value"></span>
-                                </a>
-                            </template>
-                        </div>
+                        <span class="text-gray-300" x-text="threads.formattedTotal()"></span>
+                    </div>
 
-                        <span x-show="threads.length === 0" x-cloak class="p-4 text-gray-500 block">
-                            No threads found
-                        </span>
+                    <div class="max-h-72 overflow-y-scroll">
+                        <template x-for="thread in threads.threads">
+                            <a :href="'/forum/'+thread.slug" class="flex flex-col px-4 py-2 hover:bg-lio-100">
+                                <span class="text-black-900 text-lg font-medium break-all" x-html="thread._highlightResult.subject.value"></span>
+                                <span class="text-black-900 break-all" x-html="thread._snippetResult.body.value"></span>
+                            </a>
+                        </template>
                     </div>
 
-                    <div class="w-full flex-none border-b md:w-1/2">
-                        <div class="flex text-lg font-medium border-b p-4">
-                            <span class="text-gray-900 mr-3">Articles</span>
+                    <span x-show="threads.length === 0" x-cloak class="p-4 text-gray-500 block">
+                        No threads found
+                    </span>
+                </div>
 
-                            <span class="text-gray-300" x-text="threads.length + ' Results'"></span>
-                        </div>
+                <div class="w-full flex-none border-b md:w-1/2">
+                    <div class="flex text-lg font-medium border-b p-4">
+                        <span class="text-gray-900 mr-3">Articles</span>
 
-                        <div class="max-h-72 overflow-y-scroll">
-                            <template x-for="article in articles" :key="article.title">
-                                <a :href="'/articles/'+article.slug" class="flex flex-col px-4 py-2 hover:bg-lio-100">
-                                    <span class="text-black-900 text-lg font-medium break-all" x-html="article._highlightResult.title.value"></span>
-                                    <span class="text-black-900 break-all" x-html="article._snippetResult.body.value"></span>
-                                </a>
-                            </template>
-                        </div>
+                        <span class="text-gray-300" x-text="articles.formattedTotal()"></span>
+                    </div>
 
-                        <span x-show="articles.length === 0" x-cloak class="p-4 text-gray-500 block">
-                            No articles found
-                        </span>
+                    <div class="max-h-72 overflow-y-scroll">
+                        <template x-for="article in articles.articles">
+                            <a :href="'/articles/'+article.slug" class="flex flex-col px-4 py-2 hover:bg-lio-100">
+                                <span class="text-black-900 text-lg font-medium break-all" x-html="article._highlightResult.title.value"></span>
+                                <span class="text-black-900 break-all" x-html="article._snippetResult.body.value"></span>
+                            </a>
+                        </template>
                     </div>
-                </div>
 
-                <a href="https://algolia.com" class="flex justify-end px-4 py-2">
-                    <img src="{{ asset('images/algolia.svg') }}" class="h-4 mx-4 my-2" />
-                </a>
+                    <span x-show="articles.length === 0" x-cloak class="p-4 text-gray-500 block">
+                        No articles found
+                    </span>
+                </div>
             </div>
-        </template>
+
+            <a href="https://algolia.com" class="flex justify-end px-4 py-2">
+                <img src="{{ asset('images/algolia.svg') }}" class="h-4 mx-4 my-2" />
+            </a>
+        </div>
     </div>
 </div>