Coffee :)

extension/scripts/pm/search.js

@@ -26,7 +26,15 @@
                     event.preventDefault();
                 }
             }
-        });
+        })
+            .bind('click', function (event) {
+                if (!search.wrapper.hasClass('hide-form')) {
+                    if ($(event.target).closest('.pm-tools-search-wrapper').length === 0) {
+                        search.closeForm();
+                    }
+                }
+            });
+
         search.input.on('keyup', function() {
             let $this = $(this);
             if (search.timers.change) {
@@ -37,6 +45,14 @@
                 search.searchValue($this.val());
             }, 100);
         });
+        search.wrapper.on('keydown', function (event) {
+           let keyCode = event.keyCode;
+           if (keyCode === 40 || keyCode === 38) {
+               search.navigate(keyCode === 40 ? 'down' : 'up');
+               event.preventDefault();
+               return false;
+           }
+        });
     };
 
     search.showForm = function() {
@@ -50,7 +66,8 @@
     };
 
     search.searchValue = function(searchText) {
-        if (searchText !== '') {
+        if (searchText !== '' && searchText !== search.lastSearch) {
+            search.lastSearch = searchText;
             searchText = searchText.replace(' ', '+');
             let key = search.getApiKey();
 
@@ -62,6 +79,10 @@
                     beforeSend: function(xhr){xhr.setRequestHeader('X-Redmine-API-Key', key);},
                     success: function (data) {
                         if (data && data.total_count) {
+                            if (search.currentElement) {
+                                search.currentElement = undefined;
+                            }
+
                             search.found.html('');
                             data.issues.forEach(function(element) {
                                 let issue = $('<li><a href="https://pm.i20.biz/issues/' + element.id + '">'
@@ -75,7 +96,10 @@
                         }
                     },
                     async: true
-                })
+                });
+            }
+            else {
+                search.found.append('Введите API ключ в настройках экстеншена.')
             }
         }
     }
@@ -87,6 +111,45 @@
         return search.apiKey;
     }
 
+    search.navigate = function(dest) {
+        if (typeof search.currentElement === 'undefined') {
+            search.select(0, search.found.find('li:first'));
+        }
+        let nextDelta = 0;
+        let allFound = search.found.find('li');
+        let foundCount = allFound.length -1;
+
+        if (dest === 'up') {
+            if (search.currentElement.delta === 0) {
+                nextDelta = foundCount;
+            }
+            else {
+                nextDelta = search.currentElement.delta -1;
+            }
+        }
+        else if (dest === 'down') {
+            if (search.currentElement.delta === foundCount) {
+                nextDelta = 0;
+            }
+            else {
+                nextDelta = search.currentElement.delta + 1;
+            }
+            search.select(nextDelta, $(allFound.eq(nextDelta)));
+        }
+        search.select(nextDelta, $(allFound.eq(nextDelta)));
+
+    }
+    search.select = function(delta, element) {
+        if (element.length) {
+            search.found.find('li').removeClass('active');
+            search.currentElement = {
+                element: element,
+                delta: delta
+            };
+            search.currentElement.element.addClass('active').find('a').focus();
+        }
+
+    }
     search.init();
 
 })(jQuery);

extension/styles/i20/search.css

 .pm-tools-search-wrapper {
   width: 100%;
-  position: absolute;
+  position: fixed;
   top: 20%;
   z-index: 500;
   display: flex;
@@ -8,10 +8,12 @@
 }
 
 .pm-tools-search-wrapper .search-form {
-  background-color: #cccccc;
-  padding-bottom: 15px;
+  background-color: #fff;
+  padding: 7px;
   border-radius: 7px;
   pointer-events: auto;
+  border: 1px solid #505050;
+  font-size: 15px;
 }
 
 .pm-tools-search-wrapper.hide-form {
@@ -21,16 +23,23 @@
 .pm-tools-search-wrapper ul {
   list-style: none;
   width: 400px;
-  padding: 5px;
+  padding: 2px;
+  margin: 0;
   overflow: hidden;
 }
 
-.pm-tools-search-wrapper div.found-issue:hover {
-  background-color: rgb(142, 142, 142);
+.pm-tools-search-wrapper ul li:hover,
+.pm-tools-search-wrapper ul li.active {
+  background-color: #feffdd;
 }
 
 .pm-tools-search-wrapper input {
   width: 400px;
   height: 30px;
   font-size: x-large;
-}
\ No newline at end of file
+}
+
+.pm-tools-search-wrapper ul li {
+  font-size: 15px;
+  border-bottom: 1px solid #f5f5f5;
+}