Jquery Autocomplete菜单项文本对齐/填充/对齐

我有JQuery UI AutoComplete以正常文本框显示几个项目名称及其项目代码。
我要分离商品名&商品代码 by Pipe-Character " | " - 如图所示。Jquery Autocomplete菜单项文本对齐/填充/对齐

现在，每个项目/字符串的对齐/列对齐因其长度而异。说一个字符串是大和另一个短，所以菜单看起来像锯齿形
我想它来显示MenuItem字符串作为JUSTIFIED或EQUAL长度/对齐。

什么CSS更改我必须为了完成这个？

谢谢:-)

enter image description here

来源

2013-03-18 Vitthal

一些后代码也是如此，以便我们可以提供建议:)，感谢您发布图片以更好地理解需求。 :) – MarmiK 2013-03-18 10:15:17

@MarmiK正常'JQuery'代码 '$（ '＃txtDeptCode'）自动完成（{ 来源：data.Response，的minLength：0 }）;' – Vitthal 2013-03-18 10:23:56

中标记您要插入的数据？，将类添加到该标记并将css格式添加到该标记。否则创建一个更多的功能来分割（'|'）;使用PIPE，然后单独分配它们。名称 |代码------或类似的东西.. – MarmiK 2013-03-18 11:17:47

这是我的代码---

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

这里是输出：
enter image description here

来源

2013-03-18 12:12:24 Vitthal

例如，您可以延长自动完成了一点，所以它呈现HTML的每个项目。然后，您可以设置这些HTML元素的样式，你喜欢它。你可以参考这个关于如何使每个项目中HTML的例子：Using HTML in jQuery UI autocomplete

来源

2013-03-18 10:16:47 reinder

感谢reinder ..它的棘手任务，但我正在努力;-) – Vitthal 2013-03-18 10:25:54

感谢reinder ..我扩展它，并使它为每个渲染HTML。 – Vitthal 2013-03-18 12:13:31

Jquery Autocomplete菜单项文本对齐/填充/对齐

回答

相关问题