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

Posted 2023-05-08

【中文标题】如何针对不同的 AutoComplete 的 ui-autocomplete 定位单个 CSS

【英文标题】：How to target individual CSS for different AutoComplete's ui-autocomplete

【发布时间】：2019-09-25 08:12:25

【问题描述】：

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

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

【问题讨论】：

看起来您是根据 ID 分配自动完成功能，因此可以尝试 #addModalUserSearch.ui-autocomplete 或通过 classes 选项添加类。

【参考方案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 专门为此 AutoComplete 调用和设置样式。

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

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

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

另一种更复杂的方法是使用_RenderMenu 扩展点。由于 AutoComplete 使用 Menu 来构建选择列表，因此您可以将其绑定到更深入地管理它的外观。

_renderMenu(ul, items)，返回：jQuery（仅限插件）

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

希望这会有所帮助。