开发者

Turn off element.style in jQuery UI Autocomplete

开发者 https://www.devze.com 2023-02-12 06:18 出处:网络
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 val

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/

0

精彩评论

暂无评论...
验证码 换一张
取 消