Improve search movements

editor/src/index.js

@@ -31,26 +31,39 @@ $(document).on('keydown', '.keyboard-list', function (event) {
 })
 
 $(document).on('keydown', '#search-input', function (event) {
-    let $ac = $('#autocomplete');
+    let $ac = $('#autocomplete:visible');
-    let isVisible = $(':visible', $ac)
-    if (event.key === 'ArrowDown' && isVisible) {
-        $ac.focus()
-        $ac.find('li:first-child').addClass('selected')
-        return false
-    }
     if (event.key === 'Escape') {
         $(this).val('');
+
+        if ($ac.length) {
             $ac.fadeOut();
             return false;
         }
-    return true
-})
-
-$(document).on('popup:selected', '#autocomplete', function (event, linkName, resultType, element) {
-    if (resultType === 'search-result') {
-        element.find('a')[0].click()
-        return false;
     }
+    if (event.key === 'Enter') {
+        _.defer(() => {
+            let $a = $('#autocomplete li.selected > a');
+            $a[0].click()
+        })
+        return true;
+    }
+
+    if (!$ac.length) {
+        return true;
+    }
+
+    if (event.key === 'ArrowDown') {
+        let x = $ac.find('li.selected').removeClass('selected').next('li').addClass('selected')
+        x[0].scrollIntoView({behavior: "smooth", block: "nearest"})
+        return false
+    }
+    if (event.key === 'ArrowUp') {
+        let x = $ac.find('li.selected').removeClass('selected').prev('li').addClass('selected')
+        x[0].scrollIntoView({behavior: "smooth", block: "nearest"})
+        return false
+    }
+
+    return true
 })
 
 document.querySelectorAll(".page-loader")