I'm looking to customize the CSS of jquery UI开发者_开发技巧's autocomplete results. The problem is that the plug-in automatically generates dynamic element styles (e.g., width, top, left, right values) whenever a query is entered into the input box.
I do not want any element styling, and I'm not sure how to change this in the plug-in's code. Any ideas? Alternatively, perhaps there's a way to over-ride the element styling with different CSS, without changing the plug-in code. Such ideas would be welcome as well.
Here is my approach. I created another element and "hid" the autocomplete results. In order to trigger the normal events in autocomplete, you can set the autocomplete-results container to a width and height of 0 with a float (not sure if thats needed) and set the overflow to hidden. When the drop item container would appear, I clear out my result container. When the item gets rendered, the _renderItem function, I append it to my result container.
$('#faq-search').autocomplete({'source': questions}, {
matchContains: true,
appendTo: "#faq-search-results .autocomplete-results",
change: function(e, ui){
},
close: function(e, ui){
},
search: function(e, ui){
$('#faq-search-results > ul').empty();
},
select: function(e, ui){
location.assign(ui.item.link);
}
}).data( "autocomplete" )._renderItem = function( ul, item ) {
return $("<li></li>")
.data("item.autocomplete", item)
.append('<a href="'+ item.link +'">'+ item.value +'</a>')
.appendTo($('#faq-search-results > ul'));
};
the results box that the plugin generates is fully themeable. Every element has a class name attached to it as per below
<input class="ui-autocomplete-input"/>
<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all">
<li class="ui-menu-item">
<a class="ui-corner-all">item 1</a>
</li>
<li class="ui-menu-item">
<a class="ui-corner-all">item 2</a>
</li>
<li class="ui-menu-item">
<a class="ui-corner-all">item 3</a>
</li>
</ul>
All you have to do is create a style sheet and define the properties of every class.
check the "Themeing" tab on this link http://jqueryui.com/demos/autocomplete/
精彩评论