Javascript jquery ui自动完成，类别水平显示，而不是垂直显示

它们是否是一个现有的插件或代码，以使类别能够横向显示，如表头：

---

还是从头开始更容易？

您很可能在某个地方遇到了冲突的css

我遇到了这个问题，上周就解决了

（对我来说）冲突的代码是：

ul{列表样式：无；}

这很可能包含在style.css文件或网页的某个地方。

给你

CSS

HTML

搜索：
结果:

JS

$.widget（“custom.catcomplete”，$.ui.autocomplete{
_创建：函数（）{
这个；
this.widget（）菜单（“选项”，“项目”，“>：非（.ui自动完成类别）”）；
},
_renderMenu：功能（ul，项目）{
var=这个，
currentCategory=“”；
$。每个（项目、功能（索引、项目）{
var-li，亚菜单；
如果（item.category！=当前类别）{
var elt=$（“
”+item.category+“
”）；
var子菜单=$（“
”）；//添加了

elt.append（子菜单）；
附加（英语教学）；
currentCategory=item.category；
}
submenuUl=ul.find（“.”+项.类别+“ul”）；//添加+“ul”
li=该值。\u renderItemData（子菜单，项目）；
if（item.category）{
li.attr（“aria标签”，item.category+”：“+item.label）.addClass（“ui菜单项”）；//添加了addClass（）
}
});
}
});
//实际代码
$（函数（）{
风险值数据=[
{标签：“annhhx10”，类别：“产品”}，
{标签：“annk K12”，类别：“产品”}，
{标签：“annttop C13”，类别：“产品”}，
{标签：“安德斯·安德森”，类别：“人”}，
{标签：“安德烈亚斯·安德森”，类别：“人”}，
{标签：“安德烈亚斯·约翰逊”，类别：“人”}
];
$（“#搜索”）.catcomplete({
延迟：0，
资料来源：数据，
选择：函数（项，ui）{//已添加项，ui---缺少参数。
console.log（ui.item.value）；
$（“#搜索”）.val（ui.item.value）；
$（“”）.text（JSON.stringify（ui.item））.prependTo（“#log”）；
返回false；
}
});   
});

这个问题你有什么进展吗？@damd我开始编写自己的jquery插件，但还没走多远。继续想回去，我现在也在做同样的事情。我想我现在有点上路了。我会让你知道我是否想出了一些你可以使用的东西。@damd是你在github或类似网站上的项目。。。我可以帮上忙。恐怕不行，而且由于种种原因，我真的不能这么做。

#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;
}

<label for="search">Search: </label>
<input id="search">
<div class="ui-widget" style="margin-top:2em; font-family:Arial">
  Result:
  <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>

$.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 );
     $( "<div>" ).text( JSON.stringify(ui.item) ).prependTo( "#log" );
      return false;
    }
  });   
});