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

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>