From 30f94bef41631d20ca959066dc4073115e941f41 Mon Sep 17 00:00:00 2001
From: Matthias <matmair@live.de>
Date: Tue, 20 Jul 2021 18:51:27 +0200
Subject: [PATCH] adding style and picture

---
 InvenTree/InvenTree/static/css/inventree.css  |  7 +++++++
 .../static/script/inventree/inventree.js      | 19 ++++++++++++++-----
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/InvenTree/InvenTree/static/css/inventree.css b/InvenTree/InvenTree/static/css/inventree.css
index a71e29ab5d..adb5a41ee6 100644
--- a/InvenTree/InvenTree/static/css/inventree.css
+++ b/InvenTree/InvenTree/static/css/inventree.css
@@ -1037,3 +1037,10 @@ a.anchor {
     height: 30px;
 }
 
+.search-menu {
+    padding-top: 2rem;
+}
+
+.search-menu .ui-menu-item {
+    margin-top: 0.5rem;
+}
diff --git a/InvenTree/InvenTree/static/script/inventree/inventree.js b/InvenTree/InvenTree/static/script/inventree/inventree.js
index e5952ea1fc..a9b516a4b0 100644
--- a/InvenTree/InvenTree/static/script/inventree/inventree.js
+++ b/InvenTree/InvenTree/static/script/inventree/inventree.js
@@ -91,7 +91,8 @@ function inventreeDocReady() {
                     var transformed = $.map(data.results, function (el) {
                         return {
                             label: el.name,
-                            id: el.pk
+                            id: el.pk,
+                            thumbnail: el.thumbnail
                         };
                     });
                     response(transformed);
@@ -101,11 +102,19 @@ function inventreeDocReady() {
                 }
             });
         },
-        minLength: 2,
-        classes: {'ui-autocomplete': 'dropdown-menu'},
+        create: function () {
+            $(this).data('ui-autocomplete')._renderItem = function (ul, item) {
+                console.log(item);
+                return $('<li>')
+                    .append('<span>' + imageHoverIcon(item.thumbnail) + item.label + '</span>')
+                    .appendTo(ul);
+            };
+        },
         select: function( event, ui ) {
-          window.location = '/part/' + ui.item.id + '/';
-        }
+            window.location = '/part/' + ui.item.id + '/';
+        },
+        minLength: 2,
+        classes: {'ui-autocomplete': 'dropdown-menu search-menu'},
     });
 }