feat: search-as-you-type with debounce + race-free responses (fixes empty-query 400) (#24)

* fix: don't fire search request when input is empty

Pressing Enter on an empty search bar was firing GET /v1/search?query=
which the API rejects with 400 Bad Request. Now guards against empty
and whitespace-only values before making the request, and hides any
previous results.

* feat: debounce search + min query length + race-free responses

On top of the empty-query guard, add:

- Debounce 300ms: a user typing "load-test-34" fires ONE request
  instead of 12 (one per character)
- Minimum query length of 2: single-character inputs don't fire
- Race-free responses: only the latest query's response updates the
  dropdown; older in-flight responses are ignored (prevents stale
  results when typing quickly)

Input event triggers the debounced search (search-as-you-type), Enter
flushes any pending timer and searches immediately.

Author: Boanerges1996

app/templates/account/components/search.html

@@ -3,7 +3,7 @@
     <div class="dropdown w-100">
         <input id="search-input" class="form-control w-100" type="search" placeholder="Search by participant ID, conference ID, etc." aria-label="Search" aria-haspopup="true">
         <div id="search-results" class="dropdown-menu w-100">
-            
+
         </div>
     </div>
 </form>
@@ -13,44 +13,69 @@
         var searchInput = $('#search-input')
         var searchResults = $('#search-results')
 
+        var MIN_QUERY_LENGTH = 2
+        var DEBOUNCE_MS = 300
+
+        var debounceTimer = null
+        var latestQuery = null
+
         var query = function (val) {
-            searchInput.attr('disabled', true).removeClass('is-invalid')
-            console.log(val)
+            latestQuery = val
+            searchInput.removeClass('is-invalid')
 
             peermetrics.get(peermetrics.urls['search'], {
                 query: val
             }).then(function (res) {
-                console.log(res)
+                if (latestQuery !== val) return
+
                 res = res.matches
                 if (res && res.length) {
                     searchResults.html(res.map(function (result) {
                         return `<a class="dropdown-item" href="${result.url}">
-                                    ${result.name ? result.name + ',' : ''} ${result.id}, 
+                                    ${result.name ? result.name + ',' : ''} ${result.id},
                                     <span class="text-muted">${result.type}</span>
                                 </a>`
                     }))
                 } else {
                     searchResults.html('<p class="dropdown-header">Could not find any results for this query</p>')
                 }
                 searchResults.addClass('show')
-                searchInput.one('blur', function (ev) {
+                searchInput.one('blur', function () {
                     searchResults.removeClass('show')
                 })
-
-            }).catch(function (res) {
+            }).catch(function () {
+                if (latestQuery !== val) return
                 searchInput.addClass('is-invalid')
-            }).finally(function () {
-                searchInput.attr('disabled', false)
             })
         }
 
-        searchInput.on('keydown', function (ev) {
+        var fire = function () {
+            clearTimeout(debounceTimer)
+            debounceTimer = null
+            var val = searchInput.val().trim()
+            if (val.length < MIN_QUERY_LENGTH) {
+                searchResults.removeClass('show')
+                return
+            }
+            query(val)
+        }
+
+        searchInput.on('input', function () {
+            clearTimeout(debounceTimer)
+            var val = searchInput.val().trim()
+            if (val.length < MIN_QUERY_LENGTH) {
+                latestQuery = null
+                searchResults.removeClass('show')
+                return
+            }
+            debounceTimer = setTimeout(fire, DEBOUNCE_MS)
+        })
 
-            // the enter key
+        searchInput.on('keydown', function (ev) {
             if (ev.which === 13) {
                 ev.preventDefault()
-                query(searchInput.val())
+                fire()
             }
         })
     })
-</script>
+</script>