Edit tags in the middle of input

templates/index.html

@@ -17,8 +17,9 @@
             id="search-tags"
             name="tags"
             hx-post="/search_tags"
-            hx-trigger="input changed delay:400ms"
+            hx-trigger="input changed"
             hx-target="next .tags-autocomplete"
+            hx-vals="js:{selection_end: event.target.selectionEnd}"
             hx-on::after-settle="this.focus(); this.setSelectionRange(-1, -1);"
             autofocus
           />

templates/posts.html

@@ -16,10 +16,11 @@
           id="search-tags"
           name="tags"
           hx-post="/search_tags"
-          hx-trigger="input changed delay:400ms"
+          hx-trigger="input changed"
           hx-target="next .tags-autocomplete"
+          hx-vals="js:{selection_end: event.target.selectionEnd}"
           hx-on::after-settle="this.focus(); this.setSelectionRange(-1, -1);"
-          value="{% if let Some(tags_text) = tags_text %}{{ tags_text }}{% endif %}"
+          autofocus
         />
         <ul class="tags-autocomplete" id="search-autocomplete"></ul>
         <button type="submit">Search</button>
@@ -46,7 +47,7 @@
             title="{{ post.tags }}"
           >
             <img src="/files/{{ post.thumbnail }}" />
-            <div>{{ post.rating }}</div>
+            <div>{{ post.rating | upper }}</div>
           </a>
         </li>
         {% endfor %}

templates/search_tags.html

@@ -1,9 +1,10 @@
 {% for tag in tags %}
 <li>
   <button
-    hx-post="/select_tag/{{ tag.value }}"
+    hx-post="/select_tag"
     hx-target="previous .tags"
     hx-swap="outerHTML"
+    hx-vals='{"selection_end": {{ selection_end }}, "new_tag": {{ tag.value | json | safe }}}'
   >
     {{ tag.name }}
   </button>

templates/select_tag.html

@@ -1,12 +1,14 @@
 <input
   class="tags"
   type="text"
+  id="search-tags"
   name="tags"
   hx-post="/search_tags"
-  hx-trigger="input changed delay:400ms"
+  hx-trigger="input changed"
   hx-target="next .tags-autocomplete"
-  hx-swap="innerHTML"
+  hx-vals="js:{selection_end: event.target.selectionEnd}"
   hx-on::after-settle="this.focus(); this.setSelectionRange(-1, -1);"
   value="{{ tags }}"
+  autofocus
 />
 <ul class="tags-autocomplete" hx-swap-oob="outerHTML:.tags-autocomplete"></ul>

templates/view_post.html

@@ -52,7 +52,7 @@
         <li>
           <a href="/view/{{ child_post.id }}" title="{{ child_post.tags }}">
             <img src="/files/{{ child_post.thumbnail }}" />
-            <div>{{ child_post.rating }}</div>
+            <div>{{ child_post.rating | upper }}</div>
           </a>
         </li>
         {% endfor %}