Bootstrap TokenField 下拉菜单项在选择时闪烁答案

【问题标题】：Bootstrap TokenField dropdown Item Flickering on SelectBootstrap TokenField 下拉菜单项在选择时闪烁
【发布时间】：2020-07-11 20:36:30
【问题描述】：

我目前正在使用带有自动完成下拉菜单的引导标记字段。但是，当您将鼠标悬停在下拉菜单上时，很明显文本会轻微移动。有什么办法可以解决这个问题，让文字在悬停时根本不动？

请运行代码查看问题。下拉菜单在模式中。非常感谢您的帮助！

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
      <script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/bootstrap-tokenfield.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css">
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
</head>
<body>
  <!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>
<style>
      .ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front {
        z-index: 1051; // Or more
      }

      .token-input {
        width: 25vmin !important;
      }

      .tokenfield .token {
        height: 25px;
      }

      .ui-menu-item-wrapper {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        background-color: transparent;
        border: none !important;
        text-decoration: none;
        }

      .ui-menu-item {
          display: block;
          width: 100%;
          padding: 0.25rem 1.5rem;
          clear: both;
          font-weight: 400;
          color: #000000;
          text-align: inherit;
          white-space: nowrap;
          background-color: transparent;
          border: 0;
          border-radius: 0.5rem;
        }

        .ui-menu-item:hover, .ui-menu-item:focus {
          color: #ffffff;
          text-decoration: none;
          background-color: #eaeaf1;
        }

        .ui-menu-item:hover{
          color: #ffffff;
        }

        .ui-menu:hover  .ui-menu-item-wrapper, .ui-menu-item-wrapper:hover{
            background: transparent;
            border: none;
        }
        .ui-menu {           border-radius: 3px !important;         }

        .form-control {
          height: inherit;
        }

      @media (max-width: 600px) {
        .ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front {
            width: auto !important; /* important is used because tokenfield api uses inline styling */
        }
      }
</style>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <input type="text" class="form-control" id="tokenfield" value=""/>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/bootstrap-tokenfield.js"></script>
</body>

<script>

          var sourceDataObj = ["test1", "test2", "3tests"];

            $('#tokenfield').tokenfield({
                autocomplete: {
                    source: sourceDataObj,
                    delay: 100
            },
                showAutocompleteOnFocus: true,
                    minWidth: 466

            });
</script>
</html>

【问题讨论】：

标签： javascript html jquery css twitter-bootstrap

【解决方案1】：

现在修复了自定义 CSS 中的一些问题。

您有一些不需要的透明背景。
border:none !important 不工作。
.ui-menu-item 无需为此使用自定义 CSS 样式，因为令牌字段提供的样式是响应式的。

编辑：如果您的下拉项目超过 10 个以上，我还添加了您想要的最大高度和溢出-y，您可以根据需要调整高度也是。

在下面运行 sn-p 以查看它的工作情况。

$(document).ready(function() {
    var sourceDataObj = ["test1", "test2", "3tests","test1", "test2", "3tests","test1", "test2", "3tests","test1", "test2", "3tests","test1", "test2", "3tests","test1", "test2", "3tests","test1", "test2", "3tests","test1", "test2", "3tests","test1", "test2", "3tests","test1", "test2", "3tests","test1", "test2", "3tests","test1", "test2", "3tests",];
  $('#tokenfield').tokenfield({
    autocomplete: {
      source: sourceDataObj,
      delay: 100
    },
    showAutocompleteOnFocus: true,
    minWidth: 466

  });

});

.ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front {
  z-index: 1051; // Or more
}
 
 #ui-id-1 {
   overflow-y: scroll;
   height: 300px;
 }

.token-input {
  width: 25vmin !important;
}

.tokenfield .token {
  height: 25px;
}

.ui-menu-item-wrapper {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.ui-menu {
  border-radius: 3px !important;
}

.form-control {
  height: inherit;
}

@media (max-width: 600px) {
  .ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front {
    width: auto !important;
    /* important is used because tokenfield api uses inline styling */
  }
}

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/bootstrap-tokenfield.css">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/bootstrap-tokenfield.js"></script>
</head>

<body>
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>
  <style>

  </style>
  <!-- Modal -->
  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        </div>
        <div class="modal-body">
          <input type="text" class="form-control" id="tokenfield" value="" />
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>
</body>

【讨论】：

非常感谢您的回答，我不知道谁投了反对票... 一个问题，是否可以像我在原始帖子中所做的那样更改悬停时的背景颜色，并删除使用您提供的代码悬停时出现的黑色矩形？谢谢！！！
@bobe 谢谢 - 很高兴听到。让我也检查一下黑色矩形。我根本没有看到。不要忘记接受answer 作为解决方案 - 谢谢，如果可能的话，我会更新我的答案以更改颜色。
@bobe 非常感谢。我建议在列表项上使用overflow: scroll CSS，以便在项目更多时使其可滚动。
@bobe 我已经编辑了我的答案以添加溢出和滚动选项是 10+ 元素或更多。您也可以根据需要设置height。
@bobe 好的，我知道了 - 动态地执行此操作。你有你的jQuery。类似 if .length is > 1 then do css of overflow else 不做任何事情。如果您为此发布另一个问题，那将是理想的:)