Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I have a JQuery autocomplete text box. I have a CSS style sheet which defines the theme for on-focus (say .custom-focus) and on-hover (say .custom-onhover) elements. The style sheet can change based on the user theme selection. I understand that JQuery autocomplete uses classes like "ui-state-focus" to style auto-suggest elements. I need to replace this class with my own class so that it matches with theme and changing the style sheet changes the entire jquery autocomplete theme. (Hence, I cannot simply override the default autocomplete classes). I've achieved this on-hover through following line of code:

$(element).autocomplete({
            source: function (request, response) {...})
            focus: function (event, ui) {
                event.preventDefault();
// adding this class gives desired result, and show correct styling on hover
                $(".ui-autocomplete li a").addClass("custom-onhover");
                if (ui != null) {
                    $(element).val(ui.item.value);
                }
            });

However, I cannot find a way to get the same experience when the user selects the element through keyboard up/down arrow keys.

share|improve this question
add comment

1 Answer

up vote 0 down vote

I'm finally able to resolve this by modifying focus to:

 $(".ui-autocomplete li a").removeClass("ui-corner-all");
 $(".ui-autocomplete li a").addClass("custom-onhover"); 
 $(".ui-autocomplete li a").removeClass("custom-focus"); 
 var focussedElement = $(".ui-autocomplete .ui-state-focus"); 
 focussedElement.removeClass("ui-state-focus"); 
 focussedElement.addClass("custom-focus");
share
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.