如何在 jquery ui 自动完成插件中为冗长的文本添加省略号？答案

【问题标题】：How to add ellipsis to a lengthy text in jquery ui autocomplete plugin?如何在 jquery ui 自动完成插件中为冗长的文本添加省略号？
【发布时间】：2013-01-08 05:31:16
【问题描述】：

我在我的网站中使用 jquery ui 自动完成功能，它在搜索框中列出了所有产品的名称...我正在向数据库发起查询并检索结果...这不是我的问题....

我的问题是我需要将冗长的产品名称修剪为自动完成框宽度的大小（目前我已将其设置为 180px）并添加三个点（“...”即省略号）...

我已经在普通的 div 元素中尝试过这种 css 样式并且它工作正常..但是当我尝试将它集成到我的自动完成插件时它不起作用...... 我不知道是什么问题...或者有没有其他方法可以将此省略号应用于列表...

自动完成的css样式是，

 <style>
.ui-autocomplete {
    max-height: 200px;
    max-width: 180px;
    overflow-y:scroll;
    text-wrap: none;
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
    }
 </style>

这里 text-overflow:ellipsis; 解决问题

*注意：*我不需要水平滚动来解决这个问题...

这里是工作示例，

http://jsfiddle.net/FLmfH/

但是here 添加到 jquery ui 插件时它不起作用...针对此问题有任何建议或解决方法吗？...

【问题讨论】：

标签： jquery-ui autocomplete ellipsis

【解决方案1】：

您只需要像这样在.ui-menu .ui-menu-item a 上设置overflow 和text-overflow：

.ui-menu .ui-menu-item a {
    text-overflow: ellipsis;
    overflow: hidden;
}

例如：Fiddle

$(function() {
  var availableTags = [
    "ActionScript",
    "AppleScript",
    "AAAAaaaaPP PppLLLlll EEEeeeeeee",
    "Asp",
    "BASIC",
    "C",
    "C++",
    "Clojure",
    "COBOL",
    "ColdFusion",
    "Erlang",
    "Fortran",
    "Groovy",
    "Haskell",
    "Java",
    "JavaScript",
    "JaaaaaAAAAvvvvVVVVVvAAAAaaaaaaaaaa",
    "Lisp",
    "Perl",
    "PHP",
    "O oooOoOOoooOOOoo ooOo ooO ooooOoooO ooo oOooooo ooO o oOoooOooOoooOooOoooOoooooo oooooOOoooo oOoooooOo ooooooOoooooooOoO",
    "Python",
    "Ruby",
    "Scala",
    "Scheme"
  ];
  $("#tags").autocomplete({
    source: availableTags
  });
});

.ui-autocomplete {
  max-height: 200px;
  max-width: 180px;
  overflow-y: scroll;
  overflow-x: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-right: 20px;
}
.ui-menu .ui-menu-item a {
  text-overflow: ellipsis;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />

<div class="ui-widget">
  <label for="tags">Tags:</label>
  <input id="tags" />
</div>

【讨论】：