Modify searchbar version 1.7

[wiscardboard]

I have modified the search bar to show the product image, but I'm struggling to get it to look the way I want it to. Is there a way to change it to display a table for the search result(s) and make it look like the pictures below? If so can someone please give me a sample code to work with, thank you.

I've attached two images, one of the way it looks now, the other of the way I would like it to look for reference.

 

How it is now:

 

How I would like it to look. If I can simply get the code for the basic layout, I'm pretty sure I can get the info to display the way I need it to.

[wiscardboard]

So I've got the image, product name and price in tables aligned next to each other now by modifying the ps_searchbar.js page like so:

 

 $.widget('prestashop.psBlockSearchAutocomplete', $.ui.autocomplete, {
        _renderItem: function (table, product) {


            return $("<table>")
                 .append($("<a>")
.append($('<td rowspan="2"><img src="'+ product.cover.small.url +'" style="width: 52px; height: 52px"/></td>'))
				
                    .append($("<td style='width: 200px'>").html(product.name).addClass("product"))
.append($("</td><td rowspan='2'>").html(product.price).addClass("price"))
                ).appendTo(table)            ;
        }

Can anyone help me figure out where & what I need to modify to get the condition and product category to display as well? Any help is appreciated. Thank you!

[Jagotic]

Good Job! you have done very  well 🏆