How to remove bullets from jquery autocomplete result

Question

My jquery-ajax autocomplete result shows a bulleted list. I want to remove the bullets. I don't understand where and what i need to change in jquery-ui-1.8.21.custom.css (downloaded from JQuery UI website).

Any suggestions would be highly appreciated.

Thanks in advance.

Answer 1

make sure the default ui autocomplete class contains list-style: none.

ul.ui-autocomplete {
    list-style: none;
}

Answer 2

jQuery-ui-1.10.3

This works in Chrome, IE, and Firefox. It also removes the left margin where the bullet used to be. It's derived from w3Schools http://www.w3schools.com/CSS/css_list.asp

ul.ui-autocomplete {
    list-style: none;
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}

Answer 3

change the css where it shows bullet property to

list-style:none

Answer 4

This is a bug in jquery-ui v1.9.1 and was fixed in v1.10.3. It happens for IE10 and not 11 as noted in the jquery-ui defect report (8844) .

The cross-browser workaround (tested in IE6 - 10, Firefox, Chrome, Safari, and Opera) is to apply the following CSS:

.ui-menu-item
{
  /* IE10 fix to remove bullets from showing outside of div*/
    list-style-image: url(data:0);
}

or just use a later version of jquery after v1.9.1.

NOTE: this is different than chrisvillanueva's answer to use list-style: none; just as one user posted similarly in the defect report, however that workaround wasn't accepted as cross-browser and it would seem that list-style-image: url(data:0); is a better alternative according to the defect.