Question

我正在尝试格式化jqueryui自动完成下拉菜单，并且当前在下拉菜单中有一个州和城市列表，如下所示：

  Boston Massachusetts
  Seattle Washington
  Atlanta Georgia
  Waco Texas
  Walla Walla Washington

我想排列它们以便各州排队：

  Boston       Massachusetts
  Seattle      Washington
  Atlanta      Georgia
  Waco         Texas
  Walla Walla  Washington

我该怎么做？单独计算城市中的字符数，然后向那些字符较少的城市添加“填充符”不起作用，因为它没有考虑字距调整和不同的字符宽度（即“W”与“i” ）。

我已经尝试过monkeypatching，如here所述，并尝试将下拉框格式化为表格，每个城市和州都在自己的列中。但是，表元素不受JQuery UI的尊重，也不会改变格式。

有什么建议吗？

function monkeyPatchAutocomplete() {
          $.ui.autocomplete.prototype._renderItem = function( ul, item) {
              var re = new RegExp(this.term, "i");
              var l = item.label.replace(re,"<span style='font-weight:bold;color:#000;'>" + "$&" + "</span>");
              var v = item.value.replace(re,"<span style='font-weight:bold;color:#000;'>" + "$&" + "</span>");
              return $( "<li></li>" )
                  .data( "item.autocomplete", item )
                  .append( "<a>" + v + " " + l + "</a>" )
                  .appendTo( ul );
          };
      }

Answer 1

我尝试使用样式作为表格，并且如果我稍微更改了标记，就可以使用它。 ul是表，lis是表行，然后在一个元素中有两个跨度，我们只有两个元素。

<ul> //display: table
    <li> //display: table-row
        <a>City</a> // display: table-cell
        <a>State</a> //display: table-cell
    </li>
</ul>

如果你在原始元素上找到一些特殊的显示值，也许你可以拥有和以前相同的结构，但是我尝试了原始li上的table-row和block的所有组合以及没有成功的元素。

编辑：ps覆盖jquery ui样式可能有点麻烦，但在chromes开发人员工具中逐个检查元素，并确保编写覆盖自动完成的ul，li和元素上的所有显示值的css规则。

如何调整字符宽度？

1 个答案: