jQuery UI autocomplete remove class name

Question

I have made a working autocomplete, but want to modify which class names the results should have without editing the .js or .css file of the autocomplete (plugin).

This is my code:

jQuery("#myID").autocomplete({
        source: "/java/ajax.php",
        focus: function (event, ui) {
            jQuery(event.target).val(ui.item.label);
            return false;
        },
        select: function (event, ui) {
            jQuery(event.target).val(ui.item.label);
            window.location = ui.item.value;
            return false;
        }
    });

More specifically I want to remove the class "ui-corner-all" from the ul-tag and li-tag tags that the autocomplete creates for the results. How can I do that with jQuery?

Answer 1

You could run the .removeClass() command after your query is complete. You'd have to hook it into the open event

jQuery("#myID").autocomplete({
        source: "/java/ajax.php",
        focus: function (event, ui) {
            jQuery(event.target).val(ui.item.label);
            return false;
        },
        select: function (event, ui) {
            jQuery(event.target).val(ui.item.label);
            window.location = ui.item.value;
            return false;
        },
        open: function (){$('.ui-menu-item a').removeClass('ui-corner-all');}
    });

But the recommended way is to roll your own theme using the theme roller on their site : http://jqueryui.com/themeroller/

Or simply edit the CSS of the theme. That's the recommended way.