jquery - 如何针对不同的 AutoComplete 的 ui-autocomplete 定位单个 CSS

Question

我在一个页面上有多个自动完成。

当我对所有文本字段使用 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，我需要针对每个字段进行不同的调整。但是如何根据它们描述的 DOM 元素定位个人 ui-autocomplete 选择框？

为什么向生成的任何选择列表框添加属性(例如 "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%;
}

Answer 1

当涉及到自动完成时，有几种方法可以注入(inject)您自己的 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扩展点。由于 AutoComplete 使用 Menu 来构建选择列表，您可以结合它来更深入地管理它的外观。

_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.

希望这对您有所帮助。