automatically select first finding in autocomplete fields on enter

shimatta_kenkyusho/static/js/autocomplete-foreign-key-field.js

@@ -27,6 +27,17 @@ function initialize_autocompletion_foreign_key_field(search_element) {
         });
     }
 
+    // select first match if any on enter
+    search_element.addEventListener('keydown', (e) => {
+        if (e.key === "Enter") {
+            e.preventDefault();
+            first_search_result = search_element.parentElement.querySelector('li')
+            if (first_search_result) {
+                first_search_result.click()
+            }
+        }
+    });
+
     new AutocompleteCustomUi(
         base_id, base_id+'-ac-ul', function(search_query, autocomplete_obj) {
             api_ajax_request_without_send('GET', search_url+`?search=${encodeURIComponent(search_query)}`, function(method, url, json) {

shimatta_kenkyusho/static/js/autocomplete.js

@@ -38,7 +38,9 @@ class AutocompleteCustomUi {
         this.query_callback = query_function.bind(this);
     
         document.getElementById(text_id).addEventListener("keyup", this.ac_delay(function(event) {
-            this.query_callback(document.getElementById(this.text_id).value, this);
+            if (event.key != 'Enter') {
+                this.query_callback(document.getElementById(this.text_id).value, this);
+            }
         }, autocomplete_query_delay_ms).bind(this));
 
         this.dropdown_data = {};

shimatta_kenkyusho/templates/base.html

@@ -83,6 +83,14 @@
             const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
             const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
         </script>
+        <!-- Select search field on start of QR scan ([) -->
+        <script type="text/javascript">
+            window.addEventListener("keydown", (event)=>{
+                if (event.key == '[') {
+                    document.getElementById("qr_search_field").focus()
+                }
+            })
+        </script>
         {% block custom_scripts %}
         {% endblock custom_scripts %}