Show a preview image in builtin attachment select autocomplete.

assets/css/app.css

@@ -772,6 +772,9 @@ div.dataTables_wrapper div.dataTables_info {
     -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
     -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
     box-shadow: 0 5px 10px rgba(0,0,0,.2);
+
+    max-height: 200px;
+    overflow-y: auto;
 }
 
 .tt-suggestion {
@@ -874,4 +877,11 @@ div.dataTables_wrapper div.dataTables_info {
 
 .carousel:hover .carousel-control {
     display: flex;
+}
+
+/***********************************************
+ * Typeahead image
+ ***********************************************/
+.typeahead-image {
+    width: 100%;
 }

assets/ts_src/event_listeners.ts

@@ -432,6 +432,7 @@ $(document).on("ajaxUI:reload ajaxUI:start attachment:create", function () {
             }
         });
 
+        //@ts-ignore
         $(this).typeahead({
                 hint: true,
                 highlight: true,
@@ -439,7 +440,18 @@ $(document).on("ajaxUI:reload ajaxUI:start attachment:create", function () {
             },
             {
                 name: 'states',
-                source: engine
+                source: engine,
+                limit: 250,
+                templates: {
+                    suggestion: function(data) {
+                        if (typeof data === "string") {
+                            return "<div>" + data + "</div>";
+                        } else if(typeof data === "object" && typeof data.image === "string") {
+                            return "<div class='row m-0'><div class='col-2 pl-0 pr-1'><img class='typeahead-image' src='" + data.image + "'/></div><div class='col-10'>" + data.name + "</div></div>"
+                        }
+                    },
+                },
+                display: 'name',
             });
 
         //Make the typeahead input fill the container (remove block-inline attr)