Demo of Autocomplete classes option in JQuery UI
Change this to
Change the ui-autocomplete status to see the effect on autocomplete menu
source: [ "PHP", "JQuery", "JavaScript", "HTML", "ASP", "Perl", "MySQL","Access","Excel","Dot Net" ],
HTML
<pre><code><input id=auto_c>
<div id=d1></div>
Change this to
<div class='radio-inline'>
<label><input type='radio' name='r1' id='r1' value='ui-state-highlight' checked>ui-state-highlight</label>
</div>
<div class='radio-inline'>
<label><input type='radio' name='r1' id='r2' value='ui-state-error' >ui-state-error</label>
</div>
<div class='radio-inline'>
<label><input type='radio' name='r1' id='r2' value='ui-priority-primary' >ui-priority-primary</label>
</div>
<div class='radio-inline'>
<label><input type='radio' name='r1' id='r2' value='ui-priority-secondary' >ui-priority-secondary</label>
</div>
jquery
<script>
$(document).ready(function() {
////////////////
$( "#auto_c" ).autocomplete({
source: [ "PHP", "JQuery", "JavaScript", "HTML", "ASP", "Perl", "MySQL","Access","Excel","Dot Net" ],
classes: {
"ui-autocomplete": "ui-state-highlight"
}
});
///////////////
var status_used = $( "#auto_c" ).autocomplete( "option", "classes.ui-autocomplete" );
$('#d1').html( " <b>Status of classes : </b>: " + status_used );
//////////
$("input:radio[name=r1]").click(function() {
var sel=$(this).val()
$( "#auto_c" ).autocomplete( "option", "classes.ui-autocomplete", sel );
var status_used = $( "#auto_c" ).autocomplete( "option", "classes.ui-autocomplete" );
$('#d1').html( " <b>Status of classes : </b>: " + status_used );
})
///////////////////////
})</script>