"Enhance your website with custom jQuery UI autocomplete styles

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.

Here's the jsFiddle link

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.

Answer №1

It seems that the missing piece here was the requirement for a div wrapper around the content.

To see a working example, you can check out this link: http://jsfiddle.net/Twisty/bZBLf/31/

Utilizing jQuery

$(function() {
  $("#txtBookSearch").autocomplete({
      // Code goes here
      },
      minLength: 2,
      focus: function(event, ui) {
        event.preventDefault();
      },
    })
    // More code
});

In order to create the image and the link correctly, ensure they are enclosed within a div element. You can refer to this example for guidance: http://jqueryui.com/autocomplete/#custom-data

If this step is overlooked, each element may end up with the class ui-menu-item-wrapper, leading to unexpected issues.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Obtain a collection of information from a web API by utilizing jQuery

Click on the following link to access live data from a web API: This is my first attempt at retrieving data from an API, so I may have missed some settings. To test the connection with the API, I included the following code in the HTML page: <div id= ...

Utilize jQuery to assign access keys to the numeric pad keys on the keyboard

I've been working on a Web App using HTML5 and jQuery 1.10, where I'm utilizing the accesskey attribute in inputs and links for enhanced navigation. Currently, my code looks like this: $("#linktabCost").attr("accesskey", "1"); $("#linkt ...

What techniques can I use to improve the efficiency of this jQuery code when targeting specific ids

I found this code snippet: $('#sh1').hover(function(){$('#tip1').toggle()}); $('#sh2').hover(function(){$('#tip2').toggle()}); $('#sh3').hover(function(){$('#tip3').toggle()}); $('#sh4' ...

What allows me to modify the border color and thickness of my table's <thead>, but prohibits me from changing the background color?

I have successfully changed the border styling of the top bar in the table, however, I am struggling to change the background color no matter what I try. Can someone point out where I might be making a mistake? Here is my code: <table> <thead> ...

Is there a way to change the format of a date and time from YYYY-MM-DD hh mm ss to MonthName, date, year | Hour:Minutes (am/pm) using

How can I convert the date string (2013-03-10 19:43:55) into the format (Mar 10, 2013 | 7:43 pm) using JavaScript or jQuery? ...

Activating a div in React.js using setActive: Step-by-step guide

Currently, I am in the process of developing an application with three menu tabs, each represented by an accordion comprising a menu title and content. The issue I am facing is that when clicking on any menu title, all content divs are displayed simultaneo ...

Issues with executing the intended task for a jQuery onclick function

I have a unique jQuery script set up where when #block4 is clicked, the .maincontent div will show. Initially it works perfectly by showing and then hiding the div. However, after the first two clicks, the .maincontent div shows and immediately disappears. ...

Display or conceal a div element depending on the user's choice

I am looking to hide inactive divs, but whenever I reload the page, all tab contents merge into one. The screenshot below shows the issue I'm facing. Screenshot Below is the code snippet: $('.tab a').on('click', function ...

Having difficulty modifying the width of the BODY element using CSS

For my webpage, I want the body to have a silver background that fills only 75% of the page. This means that only 75% of the page will be painted silver, while the remaining part will be left unused and painted according to the browser's defaults. The ...

What is the method for fetching and executing an external Javascript code using Ajax/jquery?

I need some help solving a problem I'm facing. I have data in a database that I am trying to plot. In my web UI, I am using Ajax to call another page that handles all the rendering. Essentially, I have a profile.php page where users can select a graph ...

Adjusting the width of images in Bootstrap is proving to be a challenge

Check out this website. There is an advertisement image below the navigation bar. I am having trouble adjusting its width. I want the image to expand and fill the empty white space. I've attempted using relative and absolute positioning, but the width ...

Cities cannot be obscured by a rotating globe

In my latest project, I have created a jsfiddle showcasing a Bostock spinning globe implementation. After successfully plotting a few city markers, I encountered a problem where not all cities were being displayed. Additionally, the script intended to hid ...

In Javascript, navigate to a specific section by scrolling down

Currently, I am in the process of enhancing my portfolio website. My goal is to incorporate a CSS class once the user scrolls to a specific section on the page. (I plan to achieve this using a JavaScript event). One approach I am considering is initially ...

"Unexpected issue with jQuery AJAX Post functionality on a shared server causing data not to

I'm currently facing an issue with my code that allows comments to be added to a php page without needing to refresh the page. While everything is functioning properly on localhost, I encountered a problem when testing it on my justhost account. The ...

Managing the layout with React Native Flexbox to evenly distribute items

Check out this React Native Demo I put together featuring Santa images being added and removed in a Flexbox. Bunch of Santas I noticed that when there are more than 3 Santas, the layout shifts to the left. I'm curious about how to keep the Santas ce ...

Populate a form with database information to pre-fill the fields

So I have this web form built with HTML, and there are certain values within the form that can be changed by the user. To ensure these changes are saved, I'm storing them in a database. My goal is to have the form automatically filled with the data fr ...

Regular Expression: locate HTML elements without the "@" symbol

Currently, I am working on a function to determine if a string contains HTML tags. The existing code functions correctly: self.containsTags = ko.computed(function() { if(/<[a-z][\s\S]*>/i.test(self.response())) { return true; } els ...

I am looking to modify the highlighted table cell whenever the value within it changes

I am currently working on a small project related to the Stock Market. In this project, I need to dynamically change the style of the td element based on data fluctuations - green highlight for an increase and red highlight for a decrease. In the provid ...

The functionality of JQuery is not effective when trying to retrieve a radio button value within a partial view

Trying to extract a value from a radio button to toggle another component in a modal popup. I attempted to accomplish this by including JQuery code in a partial view within the modal popup, but unfortunately, it didn't work as expected. Interestingl ...

Navigation menu that is vertical and includes submenus, where the parent list item remains active even when visiting subpages

I'm currently utilizing Jekyll and Compass to construct an interactive prototype. Within one of my includes, I've implemented a sidebar navigation. The challenge arises when dealing with submenu items, as the active class on the parent (li) does ...