codeEnthusiast codeEnthusiast - 5 months ago 8
Javascript Question

Remove default ui hyperlink behaviour

I have made a search box which uses the jQuery UI autocomplete feature to display potential search matches. I have noticed that the

s in the drop down list move and shrink the UI menu by several pixels when hovered. Is there a way to prevent this such that the only styling that appears on the menu links is the color change I have added via:

.ui-menu .ui-menu-item a:hover{

Here is a fiddle of my progress so far


So it turns out when you hover over an item in the dropdown list, jQuery ui adds a ui-state-focus class on your element which has these css properties:

.ui-state-focus {
     font-weight: normal;
     margin: -1px;

The reason you're seeing the characters jump is because of the margin: -1px;. If you override that css class with something else you can eliminate the jumping text.

So in order to fix you could do this:

.ui-menu .ui-menu-item a.ui-state-focus {
  margin: 0px;

Note I've added other CSS selectors in order to get a certain level of specificity to override jQuery UI's styles. Here's an updated jsFiddle: