Как настроить таргетинг на отдельные CSS для разных типов автозаполнения. - PullRequest
Новая
       26

Как настроить таргетинг на отдельные CSS для разных типов автозаполнения.

0 голосов
/ 07 мая 2019

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

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

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

1 Ответ

1 голос
/ 08 мая 2019

Есть несколько способов добавить свой собственный 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 Тип: Object, По умолчанию: { my: "left top", at: "left bottom", collision: "none" }

Определяет положение меню предложений относительно соответствующего элемента ввода.Параметр опции по умолчанию используется для элемента ввода, но вы можете указать другой элемент для позиционирования.Вы можете обратиться к утилите jQuery UI Position для получения более подробной информации о различных опциях.

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

_renderMenu (ul, items) , Возвраты: jQuery (только плагин))

Метод, управляющий построением меню виджета.Методу передается пустой <ul> и массив элементов, которые соответствуют введенному пользователем термину.Создание отдельных <li> элементов должно быть делегировано _renderItemData(), что, в свою очередь, делегирует точке расширения _renderItem().

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

...