元のページリクエストのみでASPXでオートコンプリートする方法は？

StackOverflow https://stackoverflow.com/questions/826641

質問

要素が多すぎる（200以上）選択リストを含むASPX（.NET 2.0）ページを開発しています。

これをテキストボックスのように振る舞うものにするにはオートコンプリートが必要ですが、オートコンプリートの提案が必要です。

JQueryを使用したいと思います。これまでの検索では、ある種のバックエンドサービス、追加リクエスト（AJAX）などを必要とするオートコンプリートのみを提供していました。ページリクエストですべてのデータを一度に配信することをお勧めします。理想的には、選択リストのエントリとしてです。

選択リストを変換するオートコンプリートボックスはありますか？または、外部リソースにアクセスする必要がないように、オートコンプリートを（.NET 2.0のASPXで）ページに既にあるデータに配線する方法はありますか？

編集：ポストバックは私が探していたフレージングではありませんでした。つまり、元のページリクエストで配信されます。

編集2：ページは正常に劣化するはずです。そこにあるソリューションの多くはコンテンツを「インジェクト」するため、javascriptがなければコンテンツを取得できません。 200以上の選択肢があるかもしれませんが、少なくともそこに存在するでしょう。選択リストの変換が理想的である理由です。

役に立ちましたか？

解決

スティーブウィルコックの提案に従って、 jQueryオートコンプリートプラグインを使用します。通常の選択ボックスを出力し、スクリプトでそれをテキストボックスに置き換え、オプション要素の場合に構築する配列でプラグインを初期化します。したがって、データは select ：

として入力されます 
<select size="1" id="options" name="options">
  <option>Option #1</option>
  <option>Option #2</option>
  <option>Option #3</option>
  <option>Option #4</option>
  <option>Option #5</option>
  <option>Option #6</option>
  <option>Option #7</option>
</select>

...そして次のように変換します：

$(function(){
  // execute once the DOM is ready...

  // build array of option texts
  var options = [];
  $("#options option").each(function(){
    options.push($(this).text());
  });

  // build an input field, replace the select with it,
  // and wire up autocomplete.
  $("<input id='options' name='options' type='text'>")
    .replaceAll("#options")
    .autocomplete(options, {autoFill: true});  
});

... JSはありませんか？問題ありません-あなたはまだ select を持っています。

他のヒント

http://docs.jquery.com/Plugins/Autocomplete/autocomplete#url_or_dataoptions

jquery autcompleteプラグインは、データを配列として取得できます。要件に合うはずの.jsインクルードファイルで配列を構築する場合。

例については、デモページをご覧ください-＆quot;複数の都市（ローカル）＆quot;セクション、およびそこで使用されるlocaldata.jsファイル。

オートコンプリートコンボボックス機能を提供するサードパーティのコントロールが多数あります（ComponentArtのWebUIツールキットのコントロールを使用します）。

完全なポストバックを回避するために、AJAXテクニックを使用して同じアイデアを実現することもできます。

ここでの回答は非常に役立ちましたが、選択リストで直接自動的に機能する、さらに検索した後にこのプラグインが見つかりました：

セクシーコンボ： http://code.google.com/p/sexy-combo /

デモページ： http://phone.witamean.net/sexy- combo / examples / index.html

これにより、作業が少し少なくなります。

他の人の参考のためにこれを文書化したかった。助けてくれてありがとう。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top