2

我正在尝试格式化 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，如此处所述，并尝试将下拉框格式化为表格，每个城市和州都在自己的列中。但是，表格元素不受 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 );
          };
      }
4

1 回答 1

2

I tried the thing with styling as a table and got it to work if I changed the markup a little bit. The ul is the table, lis is table-rows and then instead of having two spans inside an a element we just have two a elements.

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

Maybe you can have the same structure as before if you find some special display value on the original a element, but i tried all combinations of table-row and block on the original li and a elements without success.

Edit: ps Overriding the jquery ui styles can be a bit cumbersome but inspect the elements one by one in chromes developer tools and make sure to write css rules that override all the display values on the autocomplete's ul, li and a elements.

于 2012-09-24T17:06:18.113 回答