Update the search to update without override other parameters and use alpinejs.

views/admin_panel.hbs

@@ -16,7 +16,16 @@
           </div>
         </div>
         <div class="flex flex-col md:flex-row items-stretch md:items-center md:space-x-3 space-y-3 md:space-y-0 justify-between mx-4 py-4 border-t dark:border-gray-700">
-          <div class="w-full md:w-1/2">
+          <div class="w-full md:w-1/2"
+               x-data="{
+                 search: new URLSearchParams(location.search).get('search')
+               }"
+               x-init="$watch('search', (value) => {
+                 const url = new URL(window.location.href);
+                 url.searchParams.set('search', value);
+                 history.replaceState(null, null, '?'+url.searchParams.toString());
+               })"
+          >
           <div class="flex items-center">
             <div class="relative w-full">
               <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
@@ -27,6 +36,7 @@
               <input type="text"
                      id="search"
                      name="search"
+                     x-model="search"
                      hx-post="/htmx/admin/search/articles/"
                      hx-trigger="input changed delay:500ms, search"
                      hx-target="#articles"
@@ -174,5 +184,4 @@
   </div>
 </main>
 
-{{> search_articles_update_param_script }}
 

views/index.hbs

@@ -6,4 +6,3 @@
   {{> articles_briefly }}
 </main>
 
-{{> search_articles_update_param_script }}

views/partials/search_articles.hbs

@@ -1,4 +1,13 @@
-<div class="max-w-md mx-auto">
+<div class="max-w-md mx-auto"
+     x-data="{
+       search: new URLSearchParams(location.search).get('search')
+     }"
+     x-init="$watch('search', (value) => {
+      const url = new URL(window.location.href);
+      url.searchParams.set('search', value);
+      history.replaceState(null, null, '?'+url.searchParams.toString());
+    })"
+  >
     <label for="default-search" class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white">Search</label>
     <div class="relative">
         <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
@@ -9,6 +18,7 @@
         <input type="search"
                id="search"
                name="search"
+               x-model="search"
                hx-post="/htmx/search/articles/"
                hx-trigger="input changed delay:500ms, search"
                hx-target="#articles"

views/partials/search_articles_update_param_script.hbs

@@ -1,9 +0,0 @@
-<script>
-  function updateURLSearchParameter() {
-    let search = htmx.find('#search')
-    let qp = new URLSearchParams();
-    qp.set('search', search.value);
-    history.replaceState(null, null, "?"+qp.toString());
-  }
-  document.querySelector('#search').addEventListener('input', updateURLSearchParameter);
-</script>