自动完成功能会在下拉菜单中截断单词之间的空格

Question

我正在将项目作为变量数组加载，以使自动完成工作。 在源代码中，项目如下所示：

'.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',

请注意，第一个字符是商品代码，后跟商品说明。

从字符串的开头到项目描述的第一个字符，始终有相同数量的字符（包括空格）。 当我选择一个项目时，输入中的文本将完全按照其在数组中的方式显示，但是下拉列表仅在项目代码和项目描述之间显示一个空格。 看来jQuery ui将单词之间的空格截断为最大1。

有没有一种方法可以显示下拉菜单中原始字符串所具有的确切空格数量。 我需要做到这一点，以便项目看起来像放在表中，以提高可读性。 任何解决方案或解决方法将不胜感激。

Answer 1

尝试将每个结果中的每个空格替换为一个不间断的空格：

 

Answer 2

通过添加以下内容解决：

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

唯一的问题是字母间距。 并非所有字符都占用相同的空间，因此看起来有些偏离。 但是，一次有一个问题。