我正在尝试水平显示自动完成结果,而不是默认(垂直(。我能够做到这一点,但问题是我无法再从下拉列表中选择该项目。我想是因为我用了div 而不是 ul。如果我使用 ul jquery 会内联附加一些不需要的类。这扰乱了水平行为
.HTML
<label for="search">Search: </label>
<input id="search">
.CSS
#search {
width: 500px;
}
.ui-autocomplete {
display: flex;
width: auto !important;
}
.ui-autocomplete-category {
font-weight: bold;
padding: .2em .4em;
margin: .8em 0 .2em;
line-height: 1.5;
}
.ui-autocomplete-category ul{
padding:0;
}
.submenu {
font-weight: normal;
}
.JS
$.widget( "custom.catcomplete", $.ui.autocomplete, {
_create: function() {
this._super();
this.widget().menu( "option", "items", "> :not(.ui-autocomplete-category)" );
},
_renderMenu: function( ul, items ) {
var that = this,
currentCategory = "";
$.each( items, function( index, item ) {
var li, submenuUl;
if ( item.category != currentCategory ) {
var elt = $("<li class='ui-autocomplete-category'>" + item.category + "</li>");
var submenu = $("<div class='submenu "+ item.category +"'></div>");
elt.append(submenu);
ul.append(elt);
currentCategory = item.category;
}
submenuUl = ul.find("."+item.category+"");
li = that._renderItemData(submenuUl, item );
if ( item.category ) {
li.attr( "aria-label", item.category + " : " + item.label );
}
});
}
});
https://codepen.io/nitinmendiratta/pen/aMMeOz
这就是我喜欢的小部件!
主要错误是没有ul
作为自定义li
的直接父级。
然后,那些自定义li
需要ui-menu-item
类才能被选中......
最后,您必须使用 !important
">覆盖">嵌套ul
的样式。因此,它们将显示为具有relative
位置的block
。顺便说一句,没有边界...
我删除了一个奇怪显示的图标...
它在CodePen中工作正常。它需要一个额外的 CSS 规则才能在下面的代码片段中工作。(不要问我为什么!
$.widget( "custom.catcomplete", $.ui.autocomplete, {
_create: function() {
this._super();
this.widget().menu( "option", "items", "> :not(.ui-autocomplete-category)" );
},
_renderMenu: function( ul, items ) {
var that = this,
currentCategory = "";
$.each( items, function( index, item ) {
var li, submenuUl;
if ( item.category != currentCategory ) {
var elt = $("<li class='ui-autocomplete-category'>" + item.category + "</li>");
var submenu = $("<div class='submenu "+ item.category +"'><ul></ul></div>"); // Added <ul></ul>
elt.append(submenu);
ul.append(elt);
currentCategory = item.category;
}
submenuUl = ul.find("."+item.category+" ul"); // added +" ul"
li = that._renderItemData(submenuUl, item );
if ( item.category ) {
li.attr( "aria-label", item.category + " : " + item.label ).addClass("ui-menu-item"); // Added the addClass()
}
});
}
});
// Actual Code
$(function() {
var data = [
{ label: "annhhx10", category: "Products" },
{ label: "annk K12", category: "Products" },
{ label: "annttop C13", category: "Products" },
{ label: "anders andersson", category: "People" },
{ label: "andreas andersson", category: "People" },
{ label: "andreas johnson", category: "People" }
];
$( "#search" ).catcomplete({
delay: 0,
source: data,
select: function(item, ui){ // Added item, ui --- Arguments were missing.
console.log(ui.item.value);
$( "#search" ).val( ui.item.value );
return false;
}
});
});
#search {
width: 500px;
}
.ui-autocomplete {
display: flex;
width: auto !important;
}
.ui-autocomplete-category {
font-weight: bold;
padding: .2em .4em;
margin: .8em 0 .2em;
line-height: 1.5;
}
.ui-autocomplete-category ul{
padding:0;
}
.submenu {
font-weight: normal;
}
/* ADDED STYLE */
.ui-autocomplete>li>div>ul{
display: block !important;
position: relative !important;
border: 0 !important;
}
span.ui-menu-icon{
display:none !important;
}
/* ADDED for the SO snippet only !! Not needed on CodePen */
.ui-autocomplete>li{
display: inline-block !important;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<label for="search">Search: </label>
<input id="search">