1

私は自分のサイトでjqueryuiオートコンプリートを使用していますが、検索ボックスにすべての製品名が表示されます...データベースにクエリを実行して結果を取得しています...それは私の問題ではありません...

私の問題は、長い製品名をオートコンプリートボックスの幅のサイズにトリミングし（現在は180pxに設定しています）、3つのドット（ "..."、つまり省略記号）を追加する必要があることです。

私は通常の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/

しかし、ここではjquery uiプラグインに追加すると機能しません...この問題の提案や回避策はありますか？...

4

1 に答える 1

2

次のようにオーバーフローとテキストオーバーフローを設定する必要があります。.ui-menu .ui-menu-item a

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

例：フィドル

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

于 2013-01-08T06:16:50.550 に答える