CODEWITHSUNDEEP
jqueryjquery-uijquery-plugins
boruchsiper
boruchsiper

Reputation: 2028

Autocomplete truncates spaces between words in the drop down

I'm loading items as an array of variables for the auto complete to work. In source the items look like this:

'.12L    2 LB RYE', 
'.16G    6 GRAIN', 
'.16GR   6 grain roll', 
'.199    1-1\\2 LB WHITE', 
'.1BP    black pump', 
'.1CB    CLUB BREAD', 
'.1CL    CLUB fer.', 
'.1CLN   CLUB NEW', 
'.1CM    CLUB MEZONOS', 
'.1CRB   CORN BREAD',

Notice the first characters are the item code followed by the item description.

There is always the same amount of characters (including spaces) from the beginning of the the string until the first character of the item description. When I select an item, the text in the input shows up exactly the way it is in the array, but the drop down list only shows one space between the item code and item description. It appears jquery ui truncates the spaces between words to a maximum of one.

enter image description here

Is there a way for the drop down to show the exact amount of spaces that the original string has. I need to accomplish this so that the items look like they're in a table for readability. Any solutions or workaround would be much appreciated.

Upvotes: 1

Views: 879

Answers (2)

boruchsiper
boruchsiper

Reputation: 2028

Solved by adding this:

$('.ui-autocomplete').wrap(function() {
                    return '<pre class="spacing">' + $(this).text() + '</pre>';
                    });

The only problem is with letter spacing. Not all characters take up the same space so it looks a little off. But hey, one problem at a time.

Upvotes: 1

driangle
driangle

Reputation: 11779

Try replacing each space in each result to a non breaking space: 

&nbsp;

Upvotes: 0

Related Questions