Question

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.

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.

Answer 1

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.