JQuery自動完成結果樣式
[英]JQuery autocomplete result style
問題描述
我正在嘗試從自動完成結果中更改樣式。
我試過了：
// Only change the inputs
$('.ui-autocomplete-input').css('fontSize', '10px');
$('.ui-autocomplete-input').css('width','300px');
我搜索並無法找出結果使用的類，以便我可以更改其字體大小和寬度。
謝謝。
使用： jQuery-UI自動完成
編輯：我需要從我的結果中更改css，這來自我的JSON，而不是來自輸入。 您發布的代碼僅更改輸入，而不是結果。 這就是為什么我要求結果列表使用的類（至少，我相信這是一個列表）。 我試圖從ff使用fb而無法找到它。 再次感謝您的耐心等待。
EDIT2：我將使用jQuery UI中的自動完成功能作為示例。
在我從首頁示例的文本框中鍵入“Ja”后，Java和JavaScript將顯示為結果，位於文本框下方的小框中。
這個小盒子就是我想要改變的CSS。 我上面的示例中的代碼只更改了我的文本框CSS（我根本不需要）。
我不知道我現在是不是很清楚。 我希望如此，但如果沒有，請告訴我; 如果需要我會更加努力地表明我的問題。
我需要的是包含結果項的UL類。
解決方案正如Zikes在對已接受答案的評論中所說，這是解決方案。 您只需要在CSS文件中放置ul.ui-autocomplete.ui-menu{width:300px} 。
這將使得所有結果框css具有width:300px （與樣本一樣）。
我忘記了頁面加載時結果對象不存在，因此無法通過調用
$('...').css()來找到並鎖定目標.css$('...').css()。 您實際上需要在CSS文件中放置ul.ui-autocomplete.ui-menu{width:300px}，以便在生成結果並將其插入頁面時生效。
- Zikes
4 個解決方案
解決方案1
20 已采納 2011-03-23 18:29:55
有關自動填充小部件樣式的信息可以在這里找到： http ： //docs.jquery.com/UI/Autocomplete#theming
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;
}
解決方案2
14 2013-05-27 23:08:15
我可以通過將此css添加到文檔的<head> （自動完成javascript上方）來進行調整。
以下某些內容可能比其他內容更具相關性。 如果更改這些輸入會影響您不希望受影響的其他元素，則可以使其特定於自動完成輸入。
<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>
解決方案3
3 2011-09-15 13:50:12
如果你正在使用官方的jQuery ui自動完成（我在1.8.16）並想手動定義寬度，你可以這樣做。
如果你正在使用縮小版本（如果沒有，那么通過匹配_resizeMenu手動查找），找到...
_resizeMenu:function(){var a=this.menu.element;a.outerWidth(Math.max(a.width("").outerWidth(),this.element.outerWidth()))}
...並將其替換為（在Math.max之前添加this.options.width ||）...
_resizeMenu:function(){var a=this.menu.element;a.outerWidth(this.options.width||Math.max(a.width("").outerWidth(),this.element.outerWidth()))}
...你現在可以在.autocomplete（{width：200}）函數中包含一個寬度值，jQuery將尊重它。 如果沒有，它將默認計算它。
解決方案4
2 2011-03-23 18:36:44
您知道有兩種優化代碼的選項：
而不是這個：
$('.ui-autocomplete-input').css('fontSize', '10px');
$('.ui-autocomplete-input').css('width','300px');
你可以這樣做：
$('.ui-autocomplete-input').css('fontSize', '10px').css('width','300px');
或者甚至更好，你應該這樣做：
$('.ui-autocomplete-input').css({fontSize: '10px', width: '300px'});
自定義 jquery 自動完成結果
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.