发表新帖
发表新帖

JQuery autocomplete result style

后端 未结
关注
4 1228
生来不讨喜
生来不讨喜 2020-12-29 07:17

I\'m trying to change the style from my AutoComplete result.

I tried:


// Only change the inputs
$(\'.ui-autocomplete-input\').css(\'fontSize\', \'1
相关标签:
4条回答
  • 春和景丽
    2020-12-29 07:17

    Information on styling the Autocomplete widget can be found here: http://docs.jquery.com/UI/Autocomplete#theming

    Fiddle

    HTML

    <input type="text" id="auto">

    jQuery

    $('#auto').autocomplete({'source':
    ['abc','abd','abe','abf','jkl','mno','pqr','stu','vwx','yz']
});

    CSS

    ul.ui-autocomplete.ui-menu{width:400px}

/* 
    targets the first result's <a> element, 
    remove the a at the end to target the li itself 
*/
ul.ui-autocomplete.ui-menu li:first-child a{
    color:blue;
}
    0 讨论(0)
  • 萌比男神i
    2020-12-29 07:25

    I was able to adjust by adding this css to the <head> of the document (above the autocomplete javascript).

    Some of the following may be more relevant than others. You could make it specific to the autocomplete input if changing these affects other elements you don't want affected.

    <style type="text/css">
 /* http://docs.jquery.com/UI/Autocomplete#theming*/
.ui-autocomplete { position: absolute; cursor: default; background:#CCC }   

/* workarounds */
html .ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */
.ui-menu {
    list-style:none;
    padding: 2px;
    margin: 0;
    display:block;
    float: left;
}
.ui-menu .ui-menu {
    margin-top: -3px;
}
.ui-menu .ui-menu-item {
    margin:0;
    padding: 0;
    zoom: 1;
    float: left;
    clear: left;
    width: 100%;
}
.ui-menu .ui-menu-item a {
    text-decoration:none;
    display:block;
    padding:.2em .4em;
    line-height:1.5;
    zoom:1;
}
.ui-menu .ui-menu-item a.ui-state-hover,
.ui-menu .ui-menu-item a.ui-state-active {
    font-weight: normal;
    margin: -1px;
}
</style>
    0 讨论(0)
  • 灰色年华
    2020-12-29 07:31

    Just so you know you have two options for optimizing your code:

    Instead of this:

    $('.ui-autocomplete-input').css('fontSize', '10px');
$('.ui-autocomplete-input').css('width','300px');

    You can do this:

    $('.ui-autocomplete-input').css('fontSize', '10px').css('width','300px');

    Or even better you should do this:

    $('.ui-autocomplete-input').css({fontSize: '10px', width: '300px'});
    0 讨论(0)
  • 花落未央
    2020-12-29 07:37

    If you are using the official jQuery ui autocomplete (i'm on 1.8.16) and would like to define the width manually, you can do so.

    If you're using the minified version (if not then find manually by matching _resizeMenu), find...

    _resizeMenu:function(){var a=this.menu.element;a.outerWidth(Math.max(a.width("").outerWidth(),this.element.outerWidth()))}

    ...and replace it with (add this.options.width|| before Math.max) ...

    _resizeMenu:function(){var a=this.menu.element;a.outerWidth(this.options.width||Math.max(a.width("").outerWidth(),this.element.outerWidth()))}

    ... you can now include a width value into the .autocomplete({width:200}) function and jQuery will honour it. If not, it will default to calculating it.

    0 讨论(0)
 看不清?
提交回复
热议问题