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

我已将

jqueryui自动完成

添加到一个普通文本框，该文本框显示少数项目名称及其项目代码。
我用管道字符“|”来分隔项目名称和项目代码，如下图所示

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

MenuItem

字符串显示为

alized

或

EQUAL

length/alignment

为了实现这一点，我必须做哪些

CSS

更改

谢谢：-）

---

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

这是我的代码---

$.ajax({
url:'SomeController/someAction'，
键入：“POST”，
数据类型：“json”，
数据：{}，
成功：函数（数据、文本状态、jqXHR）{
var x；
$（'#txtDeptCode'）。自动完成({
资料来源：data.Response，
最小长度：0，
选择：功能（事件、用户界面）{
x=ui.item.value；
event.preventDefault（）；
x=x.split（“|”）；
$（this.val（x[1]）。拆分（“”）[1]）；
}
}).data（“ui自动完成”）。\u renderItem=函数rditem（ul，项）{
返回$（“
”）数据（“item.ui自动完成”，item.append”（“+item.value.split（“|”）[0]+”（“+item.value.split（“|”）[1]+”）.appendTo（ul）；
};

下面是输出：

---

也发布一些代码，以便我们可以提供一些建议：），感谢您发布图像以更好地理解需求。@MarmiK its normal

JQuery

code

$（'#txtDeptCode'）.autocomplete（{source:data.Response，minLength:0}）；

在哪个标记中插入数据？将类添加到该标记中，并将css格式添加到该标记中。否则，再创建一个要拆分的函数（“|”）；使用管道，然后分别分配它们。名称|代码-------或类似的东西..完成MarmiK..我找到了解决方案！！！谢谢大家！谢谢reinder..我扩展了它并使它为每个人呈现HTML。

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