我试图水平显示自动完成结果,而不是默认值(垂直)。我能够做到,但问题是我无法从下拉列表中选择项目。我认为是因为我使用div而不是ul。如果我使用ul,jquery将内联一些不需要的类。弄乱了水平行为
HTML
function preload() {
this.load.image('sky', 'file:///home/chronos/u-fc7808c01e889e74148d1013b69f0a2241def976/Downloads/testprogram-atom.js/assets/sky.png');
this.load.image('ground', 'assets/platform.png');
this.load.spritesheet('dude', 'assets/dude.png');
this.load.image('star', '/home/jojobinks/Desktop/testprogram-atom.js/star.png');
}
function create() {
this.add.image(0, 0, 'sky');
}
function update() {
}
var config = {
type: Phaser.AUTO,
width: 800,
height: 600,
backgroundColor: '#FF0000',
physics: {
default: 'arcade',
arcade: {
gravity: {y:200},
debug: false
}
},
scene: {
preload,
create,
update
},
}
var game = new Phaser.Game(config);
CSS
<script src="https://cdn.jsdelivr.net/npm/phaser@3.16.2/dist/phaser-arcade-physics.min.js"></script>
JS
<label for="search">Search: </label>
<input id="search">
答案 0 :(得分:1)
那是我喜欢的小部件tweeking!
主要错误是没有<=
作为自定义ul
的直接父代。
然后,那些自定义li
需要li
类才能被选中...
最后,您必须使用ui-menu-item
“覆盖” 嵌套ul
的样式。因此它们将显示为!important
,位置为block
。顺便说一句,没有边界...
我删除了一个奇怪地显示...的图标
它在CodePen中工作正常。它需要附加的CSS规则才能在以下代码段中运行。 (不要问我为什么!)
relative
$.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;
}