Блог

Главная - Вопросы по программированию - Отображать автозаполнение пользовательского интерфейса jquery категориями по горизонтали, а не по вертикали

Отображать автозаполнение пользовательского интерфейса jquery категориями по горизонтали, а не по вертикали

#jquery #jquery-ui-autocomplete

#jquery #jquery-ui-автозаполнение

Вопрос:

Я пытаюсь отобразить результаты автозаполнения по горизонтали вместо значений по умолчанию (по вертикали). Я смог это сделать, но проблема в том, что я больше не могу выбрать элемент из выпадающего списка. Я думаю, потому что я использовал 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

Ответ №1:

Мне нравится настройка виджета!

Главной ошибкой было отсутствие ul в качестве прямого родителя вашего пользовательского li интерфейса.
Затем для выбора этого пользовательского интерфейса li нужен ui-menu-item класс…

Наконец, вы должны «переопределить» стиль вложенного ul использования !important . Таким образом, они будут отображаться как block с relative позицией. Кстати, без границ…

И я удалил значок, который странно отображался…

Это отлично работает в 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">

Комментарии:

1. Большое спасибо, все работает так, как ожидалось. Ценю это 🙂