I've been working on replicating this example of adding an image to the autocomplete list in jQuery UI, but unfortunately, my version doesn't look quite right.
View the Example on the Left vs Mine on the Right
The CSS is a bit complex, and the video tutorial I followed didn't cover it. I'm guessing it's using the default jQuery UI styling, but when I stick to the defaults, it doesn't turn out as expected. I started with the CSS file from the jQuery UI website and made some tweaks to get where I am now. However, now that I've added images, I'm not sure how to make further changes.
I know there's probably a lot of unnecessary CSS that could be removed since it's not currently being used, but I might need it later on.
Some key parts of the CSS include:
Everything between lines 123 and 165:
.ui-autocomplete {
position: absolute;
top: 0;
left: 0;
cursor: default;
max-height: 27em;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
}
.ui-menu .ui-menu-item-wrapper {
position: relative;
padding: 3px 1em 3px .4em;
}
as well as near the very bottom at line 1147:
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
border: 1px solid #003eff;
background: #007fff;
font-weight: normal;
color: #ffffff;
}
Lastly, there's the .imageClass section all the way at the end of the CSS. Perhaps that could use some adjustments? There may be other aspects to modify or add, but I find CSS challenging to work with.