How to add ellipsis to a lengthy text in jquery ui autocomplete plugin?

I'm using jquery ui autocomplete in my site and it lists all product's name in the search box...i m firing a query to the database and retrieving the results...thats not my problem....

My problem is i need to trim the lengthy products name to the size of the width of autocomplete box(currently i have set it to 180px) and add three dots("..." i.e. an ellipsis)...

I have tried this css style in a normal div elemnt and its working fine..but when i try to integrate this to my autocomplete plugin it is not working... I dont know what is the problem...or is there any other way to apply this ellipsis to lists...

css style for autocomplete is,

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

here text-overflow:ellipsis; does the trick

*Note:*I dont need a horizontal scroll as a solution for this problem...

here is working examples,

http://jsfiddle.net/FLmfH/

but here its not working when added to jquery ui plugin...any suggestions or workarounds for this problem?...

Solution

You just need to set the overflow and text-overflow on the .ui-menu .ui-menu-item a like this:

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

Example: 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>