如何为不同的自动完成 ui-自动完成定位个人 CSS

Question

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

当我对我的所有文本字段使用 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"）以便轻松定位如此困难？

没有我可以依赖的位置 before/after 依赖。选项列表添加在 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

当涉及到自动完成时，有几种方法可以注入您自己的 CSS。你的 post 并没有真正显示你想要的，所以我会尽量含糊其辞。

考虑以下因素：

$(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>

这个例子本质上是non-functional，由于来源较远，但您仍然可以看到基本的列表生成：

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

您可以看到 class 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.

希望这对您有所帮助。

如何为不同的自动完成 ui-自动完成定位个人 CSS

How to target individual CSS for different AutoComplete's ui-autocomplete

css

jquery

jquery-ui

jquery-ui-autocomplete