jQuery autocomplete no word wrap

Question

I'm using jQuery UI's autocomplete and I've come across and issue that I can't figure out how to fix.

The issue is that when the suggestions are too long they are automatically wrapped to take up multiple lines. I would like to have the suggestions window extend to a max size and not show the overflow. The thing is that I would like for the suggestions to only be displayed in one line. I don't want to set a fixed width for the suggestion box. If the suggestions are shorter in length then my max width I want jQuery UI to set the appropriate width.

Abhorrence

Hi, i've setup a basic fiddle, could you demonstrate the problem ? – Storybook

I'm having issues connecting to fiddle at the moment. The specifics is that I'm building a form with a select/autocomplete combo box. I only have 290px to play with for the input, but I'm OK with having the suggestion box extend over the elements that are on the left of the input if necessary. I'm able to hard code the width and it looks OK, but of course I don't want the suggestion box to cover other elements on the page unless it is necessary. And, that depends on the search term. – Abhorrence

I've updated the JSFiddle code. – Abhorrence

Answer 1

I would suggest trying something along the lines of truncating the results and putting the full result text in the hover title text.

You can truncate the result text using css:

.ui-menu-item a
    {
        max-width:100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }  

i've added to rusln's fiddle to demonstrate...

Nephogram

I'll keep this in mind as a last resort, but I would like to display the full text in the LI. – Abhorrence

I've been able to get it to work the way I need, except for the ellipsis. Here is my updated fiddle. The class ui-autocomplete controls the css for the drop-down. – Abhorrence

to get the ellipsis to work, just add the css i posted above to your existing css - jsfiddle.net/mN9q6/10 – Nephogram