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」など) が考慮されないため、機能しません。 ）。

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

1 に答える 1

2

スタイリングを表にして試してみたところ、マークアップを少し変えれば動くようになりました。ul はテーブル、lis はテーブル行であり、a 要素内に 2 つのスパンを持つ代わりに、2 つの a 要素を持つだけです。

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

元の a 要素に特別な表示値が見つかった場合、以前と同じ構造を持つことができるかもしれませんが、元の li 要素と a 要素で table-row と block のすべての組み合わせを試しましたが、成功しませんでした。

編集: ps jquery ui スタイルのオーバーライドは少し面倒ですが、chrome 開発者ツールで要素を 1 つずつ検査し、オートコンプリートの ul、li、および a 要素のすべての表示値をオーバーライドする CSS ルールを必ず記述してください。

于 2012-09-24T17:06:18.113 に答える