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

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

当我对所有文本字段使用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%;
}

最佳答案

当涉及自动完成功能时，有两种方法可以注入您自己的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专门为此AutoComplete调用和设置其样式。

您也可以考虑使用position选项。

  位置类型：对象，默认值：{ my: "left top", at: "left bottom", collision: "none" }

  标识建议菜单相对于关联的输入元素的位置。选项的of默认为输入元素，但是您可以指定要定位的另一个元素。您可以参考jQuery UI Position utility以获得有关各种选项的更多详细信息。

另一种更复杂的方法是利用_RenderMenu扩展点。由于自动完成功能使用菜单来构建选择列表，因此您可以将其绑定以更深入地管理外观。

  _renderMenu（ul，items），返回：jQuery（仅插件）

  控制构建窗口小部件菜单的方法。该方法将传递一个空的<ul>和一个与用户键入的术语匹配的项目数组。各个<li>元素的创建应委托给_renderItemData()，后者又委托给_renderItem()扩展点。

希望这可以帮助。

关于jquery - 如何针对不同的AutoComplete的ui-autocomplete定位单个CSS，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56026419/