Patient suggest max-height and scroll

public/css/style.css

@@ -381,6 +381,8 @@ input.search_field, textarea.search_field {
     border-radius: 3px;
     border: 1px solid #ccc;
     z-index: 9999;
+    max-height: 220px;
+    overflow-y: auto;
 }
 .suggestions-outer .suggest-item, .suggestions-outer .no-suggest-items {
     padding: 0.25rem 0.5rem;

resources/views/layouts/template.blade.php

@@ -183,6 +183,10 @@
                             activeItem.prev()
                                 .addClass('active')
                                 .siblings().removeClass('active');
+                            activeItem = $('.suggestions-outer .suggest-item.active');
+                            if(activeItem.length) {
+                                activeItem[0].scrollIntoView();
+                            }
                         }
                         return false;
                     case 40:
@@ -190,6 +194,10 @@
                             activeItem.next()
                                 .addClass('active')
                                 .siblings().removeClass('active');
+                            activeItem = $('.suggestions-outer .suggest-item.active');
+                            if(activeItem.length) {
+                                activeItem[0].scrollIntoView();
+                            }
                         }
                         return false;
                     case 13: