Jquery自动完成菜单项文本对齐/填充/对齐

Question

我JQuery UI AutoComplete在普通文本框中显示少数项目名称及其项目代码。
我正在分离项目名称＆amp;项目代码按Pipe-Character " | " - 如下图所示。

现在，每个Item / string的对齐/列对齐方式因其长度而异。假设一个字符串很大而另一个很短，所以菜单看起来像 zig-zag
我正在尝试将MenuItem字符串显示为JUSTIFIED或EQUAL长度/对齐方式。

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

谢谢： - ）

Answer 1

例如，您可以扩展自动填充程序，以便为每个项目呈现HTML。然后，您可以根据自己的喜好设置这些HTML元素的样式。您可以参考此处获取有关如何在每个项目中呈现HTML的示例：Using HTML in jQuery UI autocomplete

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);
                };

这是输出：