Jquery自动填充样式

在使用Jquery自动填充时，特别是在输出推荐术语列表后，如果更改浏览器窗口的大小，则列表的整个位置会沿相反的方向移动，其中正在进行更改执行。有没有办法避免这种情况发生？ Before browser's window size has been changed Jquery自动填充样式

After browser's window size has been changed

JS文件：

function autocomplet() { 
    $("input#ui-autocomplete-input").autocomplete({ 
     minLength: 2, 
     source: '/store.json', 
     focus: function(event, ui){ 
      $("input#ui-autocomplete-input").val(ui.item.product.name); 
      return false; 
     }, 
     select: function(event, ui){ 
      $("input#ui-autocomplete-input").val(ui.item.product.name); 
      $("input#ui-autocomplete-input").val(ui.item.product.name); 
      return false; 
     } 
     //  source: '<%= products_path(:json) %>' 
     //  source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"] 
    }).data("autocomplete")._renderItem = function(ul, item){ 
     return $("<li></li>").data("item.autocomplete", item).append("<a>"+item.product.name+"</a>").appendTo(ul); 
    } 
}; 

$(document).ready(autocomplet);

CSS文件：

body { 
    font-size: 62.5%; 
} 

table { 
    font-size: 1em; 
} 

tr:first-child{ 
    font-size: 4em; 
    font-weight: bold; 
} 

td{ 
    width: 100px; 
    height: 30px; 
} 

/* Site 
-------------------------------- */ 

body { 
    font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif"; 
} 

/* Normal 
-------------------------------- */ 

.normal h3, 
.normal h4 { 
    margin: 0; 
    font-weight: normal; 
} 

.normal h3 { 
    padding: 0 0 9px; 
    font-size: 1.8em; 
} 

.normal h4 { 
    padding-bottom: 21px; 
    border-bottom: 1px dashed #999; 
    font-size: 1.2em; 
    font-weight: bold; 
} 

.normal p { 
    font-size: 1.2em; 
} 

ul { 
    list-style: none; 
    border:none; 
} 



/* Misc visuals 
----------------------------------*/ 

/* Search textbox*/ 

fieldset.search{ 
    border:none; 
    width: 285px; 
} 

.search input.btn:hover{ 
    background: #FFFFFF no-repeat left; 
} 

.search input.btn{ 
    border:none; 
    font-size: 1.2em; 
    width: 50px; 
    height: 40px; 
    cursor: pointer; 
    background: #fbc900; 
} 

.search input.box{ 
    border-top:5px solid #fff; 
    border-bottom:5px solid #fff; 
    border-left:0px; 
    color: #fff; 
    font-size: 1.2em; 
    width: 190px; 
    height: 38px; 
    text-indent:8px; 
    background: #D63737; 
} 

.search input.box:focus{ 
    outline-width:0; 
} 

.search button.btn:hover{ 
    background: #fbc900 no-repeat bottom right; 
} 
/* Corner radius */ 
.ui-state-focus, .ui-widget-content, .ui-state-focus, .ui-widget-header, .ui-state-focus { 
    background: #DADADA; 
    color: #212121; 
    cursor: pointer; 
    width:206px; 
} 

.ui-corner-all { 
    position:relative; 
    background-color: #213216; 
    width: 206px; 
} 


.ui-active-menuitem, .ui-state-hover, .ui-state-highlight{ 
    height: 38px; 
    background:#D63737; 
    cursor:pointer; 
    width: 206px; 

} 

.ui-menu-item{ 
    font-size: 1em; 
    text-indent:9px; 
    height:38px; 
    width:206px; 
}

来源

2011-02-16 mabounassif

您可以发布您的代码（JS/CSS）？ – TNC 2011-02-16 22:45:21

我发现这个回答我的问题：

Fixed positioned search box with Autocomplete suggestions

来源

2011-02-16 23:53:12 mabounassif

你只要找到jquery.gui.css

.ui-menu .ui-menu-item { margin:0; padding: 0; zoom: 0; float: left; clear: left; width: 100%; }

波纹管代码，并在此更改字体大小..像 “FONT-SIZE：12px的”

来源

2011-11-12 08:30:29

您可能还希望使用此：

.ui-autocomplete { max-height: 300px !important; }

限制的结果弹出窗口的大小

来源

2012-02-01 18:39:38

Jquery自动填充样式

回答

相关问题