jquery - Jquery自动完成菜单项文本对齐/填充/两端对齐

Question

我必须JQuery UI AutoComplete在一个普通的文本框中显示几个项目名称及其项目代码。
我用 - 分隔项目名称和项目代码，Pipe-Character " | "如下图所示。

现在，每个项目/字符串的对齐/列对齐根据其长度而变化。假设一个字符串大而另一个短，所以菜单看起来像之字形
我正在尝试将MenuItem字符串显示为JUSTIFIED长度EQUAL/对齐方式。

CSS为了实现这一目标，我必须做出哪些改变？

谢谢 ：-）

Answer 1

例如，您可以稍微扩展自动完成功能，以便它为每个项目呈现 HTML。然后，您可以根据自己的喜好设置这些 HTML 元素的样式。您可以参考这个示例，了解如何在每个项目中呈现 HTML：在 jQuery UI 自动完成中使用 HTML

Answer 2

这是我的代码---

        $.ajax({
            url: 'SomeController/someAction',
            type: 'POST',
            dataType: 'json',
            data: {},
            success: function (data, textStatus, jqXHR) {
                var x;
                $('#txtDeptCode').autocomplete({
                    source: data.Response,
                    minLength: 0,
                    select: function (event, ui) {
                        x = ui.item.value;
                        event.preventDefault();
                        x = x.split('|');
                        $(this).val(x[1].split(' ')[1]);
                    }
                }).data("ui-autocomplete")._renderItem = function rdrItem(ul, item) {
                    return $("<li></li>").data("item.ui-autocomplete", item).append("<a><div style='width:100%;'><div style='width:70%; float:left;'>" + item.value.split('|')[0] + " </div><div style='width:30%; float:right;'> </div><div>(" + item.value.split('|')[1] + ")</div></div></a>").appendTo(ul);
                };

这是输出：