3

他の人が Meteor 内で jQuery-ui をうまく使用しているようですが、オートコンプリートを試してみた最初の試みは失敗しました。これが私が試したことです：

ダウンロードした jquery-ui ファイルをクライアント ディレクトリに配置しました (jquery は既に利用可能であるため、jQuery ファイルは保持しませんでした)。jQuery は相対パスを使用して css ファイルを検索し、Meteor はそのようにそれらを提供しないため、これは失敗します。パスを平坦化し、元のパスが要求されると、アプリのメイン ページを返します。Chrome 開発ツールは、css を予期していたが text/html を取得したことを示すエラーを返します。オートコンプリートをドロップダウンすることはできますが、矢印キーまたはマウスオーバーでオプションを閉じるとすぐに閉じます。

次に、 github の barisbalic の jQuery-ui スマート パッケージを使用してみました。これにより、css をプロジェクトに追加すると、オートコンプリートがほぼ正常に機能します。ただし、ドロップダウンは、要素<ul>の下の正しい位置ではなく、ウィンドウの左上隅に表示されます。<input>

これを行う正しい方法は何ですか？Meteorite と Atmosphere を調べましたが、パッケージが見つかりませんでした。独自のスマート パッケージを構築する方法を学ぶ必要がありますか?

4

1 に答える 1

1

フォームのレンダリング イベントを使用して、オートコンプリートを開始します。

コレクションで Meteor.autorun() を介して実行できる、データソースまたはコレクションを配列 (以下の addr_book など) にフラット化する必要があります。

function split( val ) {
  return val.split( /,\s*/ );
}

function extractLast( term ) {
  return split( term ).pop();
}


Template.compose_to_cc_bcc_subject.rendered = function () {
  start_compose_autocomplete();
}

function start_compose_autocomplete() {
  $("#field1 #field2").autocomplete({
      minLength: 0,
      source: function( request, response ) {
        response( $.ui.autocomplete.filter(
         addr_book, extractLast( request.term ) ) );
      },
      focus:function() {
        return false;
      },
      select: function( event, ui ) {
        var terms = split( this.value );
        // remove the current input
        terms.pop();
        // add the selected item
        terms.push( ui.item.value );
        // add placeholder to get the comma-and-space at the end
        terms.push( "" );
        this.value = terms.join( ", " );
        return false;
    }
  });
}

これは、複数の値を持つjQuery オートコンプリート ウィジェットを使用します。

于 2012-11-29T22:12:58.160 に答える