Turn off element.style in jQuery UI Autocomplete
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/
 
         加载中,请稍侯......
 加载中,请稍侯......
      
精彩评论