Как настроить таргетинг на отдельные CSS для разных ui-autocomplete AutoComplete

У меня есть несколько автозаполнений на странице.

Когда я использую jQuery UI AutoComplete для всех своих текстовых полей, он добавляет динамические списки выбора формы

<ul id = "ui-id-1" tabindex = "0" class = "ui-menu ui-widget ui-widget-content ui-autocomplete ui-front" style = "top: 103px; left: 1678px; width: 256.828px; display: none;">
     <li class = "ui-menu-item"><div id = "ui-id-234" tabindex = "-1" class = "ui-menu-item-wrapper">Entry 1</div></li>
</ul>

Существует стиль CSS, ui-autocomplete, который мне нужно настроить по-разному для каждого поля. Но как настроить таргетинг на поля выбора индивидуальныйui-autocomplete на основе описываемого ими элемента DOM?

Почему было так сложно добавить атрибут, например "domElement=myID", к любому сгенерированному списку выбора для упрощения таргетинга?

Нет никакой позиционной зависимости до/после, на которую я мог бы положиться. Списки выбора добавляются в нижней части DOM.

Пример одного из автозаполнений:

   $('#addModalUserSearch').autocomplete({

          source: function( request, response ) {
            $.ajax({
                url: "getAdminAddUserChoices",
                dataType: "json",
                type: "get",
                data: {
                    'term': request.term,
                    'org': $('#adminUserOrg').val()
                },
                success: function( data ) {
                      response ($.map (data, function (item) {
                          return {
                              label: item.value,  
                              value: item.key 
                          }
                      }));
                }
            });
          },
        minLength: 2,
        delay: 100,
        select: function(event, ui) { ..}

мне нужно сделать что-то вроде

.ui-autocomplete-1 {
     top: 120px !important;
     left: 80% !important;
}


.ui-autocomplete-2 {
     top: 5%;
     left: 60%;
}

Похоже, вы назначаете автозаполнение на основе идентификаторов, поэтому можете попробовать #addModalUserSearch.ui-autocomplete или добавить класс с помощью опции classes.

— 07.05.2019 23:48

jquery css jquery-ui jquery-ui-autocomplete

07.05.2019 17:57

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

448

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Есть несколько способов внедрить свой собственный CSS, когда дело доходит до автозаполнения. Ваш пост на самом деле не показывает, что вы хотите, поэтому я постараюсь быть расплывчатым.

Рассмотрим следующее:

$(function() {
  $('#addModalUserSearch').autocomplete({
    classes: {
      "ui-autocomplete": "user-search"
    },
    source: function(request, response) {
      $.ajax({
        url: "getAdminAddUserChoices",
        dataType: "json",
        type: "get",
        data: {
          'term': request.term,
          'org': $('#adminUserOrg').val()
        },
        success: function(data) {
          response($.map(data, function(item) {
            return {
              label: item.value,
              value: item.key
            }
          }));
        }
      });
    },
    minLength: 2,
    delay: 100,
    select: function(event, ui) {
      //...
    }
  });
});

.user-search {
  top: 120px !important;
  left: 80% !important;
}

<link rel = "stylesheet" href = "//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src = "https://code.jquery.com/jquery-1.12.4.js"></script>
<script src = "https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class = "ui-widget">
  <label for = "addModalUserSearch">User: </label>
  <input id = "addModalUserSearch">
</div>

Этот пример практически нефункционален из-за удаленного источника, но вы все равно можете увидеть базовое генерирование списка:

<ul id = "ui-id-1" tabindex = "0" class = "ui-menu ui-widget ui-widget-content ui-autocomplete user-search ui-front" style = "display: none;"></ul>

Вы можете видеть, что класс user-search указан в списке и может вызываться и стилизоваться CSS специально для этого автозаполнения.

Вы также можете рассмотреть возможность использования опции position.

position Type: Object, Default: { my: "left top", at: "left bottom", collision: "none" }
Identifies the position of the suggestions menu in relation to the associated input element. The of option defaults to the input element, but you can specify another element to position against. You can refer to the jQuery UI Position utility for more details about the various options.

Еще один более сложный способ сделать это — использовать точку расширения _RenderMenu. Поскольку автозаполнение использует меню для создания списка выбора, вы можете связать его, чтобы более глубоко управлять его внешним видом.

_renderMenu( ul, items ), Returns: jQuery (plugin only)
Method that controls building the widget's menu. The method is passed an empty <ul> and an array of items that match the user typed term. Creation of the individual <li> elements should be delegated to _renderItemData(), which in turn delegates to the _renderItem() extension point.

Надеюсь это поможет.

08.05.2019 00:03