FormViewでオートコンプリートを実装する方法

Question

別質問もしておりますが、質問内容が違うため新規で立てました。

別質問（Formviewに連携するdropdownlistの設置について）

別質問で実装した、多段階のDropDownListですが、機種を選択する際に、オートコンプリートで頭文字ないし、一文字でも入力すれば候補が挙げられるようにしたいのですが、どのように行えばよろしいでしょうか？

Answer 1

ASP.NETのDropDownListはHTML上はLISTとして出力されるため、ユーザーがテキストを入力するといったオペレーションは行えません。(前方一致なら、何もしなくてもそれっぽい動作はしますが。。。)

オートコンプリートを実現する場合、TextBoxに対してドロップダウンぽい機能を追加することになります。

やり用としては例えば次の方法があります。

• jQueryUIを使う(http://jqueryui.com/demos/autocomplete/)
  
• AutoCompleteExtenderを使う
• Javascriptで頑張る

今回はページロードのタイミングですでに列挙する要素が決定しているので、ｊQueryUIが使えるならこれが一番簡単そうですね。

Answer 2

御返答ありがとうございます。

できればAutoCompleteExtenderを使うを選択したいのですが、DropDownListからTextBoxに変更した場合、どういう形で、Boundすればよろしいのでしょうか？

Answer 3

AutoCompleteExtenderは最初の数文字が入力された段階で、ServiceMethodに指定されたサーバーメソッドやWebサービスを呼び出す方法で実装します。画面表示時にバインドすると言った方法では実現できません。

あっ、今のAjaxControltoolkitにはComboBoxコントロールがあるんですね。

http://msdn.microsoft.com/ja-jp/asp.net/ff710248

http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/ComboBox/ComboBox.aspx

こっちで対応出来ません？

Answer 4

すごい！こんなのがあったのですね！探す力の無さに恥ずかしさがこみ上げます。

参考になりました！ありがとうございます。

Answer 5

ComboBox には日本語対応の問題があります。

AJAX ComboBoxコントロール　日本語
http://social.msdn.microsoft.com/Forums/ja/vsgeneralja/thread/a1eecd5f-f38e-4150-9edf-f03935aabb8f

新しいバージョンでは改善されたかもしれないと思って試してみましたが、最
新版 4.1.51116.0 でもダメでした。

jQuery UI の Autocomplete は、自分が試した限りでは、日本語も対応してい
るようです。

Answer 6

jQuery UI の Autocompleteは予め用意しているリストに対しての機能なのでしょうか？

データベースから引っ張れるような設定があるのでしょうか？

探してみましたが皆さんリストを作っているようなのですが...

Answer 7

データベースから引っ張ってきて、リストをあらかじめ用意しておけばいいのではないでしょうか？

Answer 8

jQuery UIのページにRemote JSONP dataSource というサンプルがあります。$.ajaxの部分をASP.NETのWebサービス呼び出しにすればいけるんじゃないですか？

http://jqueryui.com/demos/autocomplete/#remote-jsonp

Answer 9

御返答ありがとうございます。

引っ張り方がよくわかりません。サンプルコードなどがあればいいのですが...

超初心者です。申し訳ありません。

Answer 10

上のページにView Sourceというリンクがあるので、そちらのサンプルを参考にしてください。

ASP.NETのWebサービスをJavascriptから呼び出す方法は、このあたりで。

http://www.google.co.jp/search?sourceid=chrome&ie=UTF-8&q=Javascript+ASP.NET+WebService

Answer 11

jQuert UI のページで ComboBox として紹介されているものが
参考になるかも知れません。ASP.NET の DropDownList が使え
そうな感じです（未検証です）。

Autocomplete - ConboBox
http://jqueryui.com/demos/autocomplete/#combobox

Answer 12

御返答ありがとうございます。

超初心者の私には、jQueryの導入まではできましたが、UIの使い方がいまいちわからないので、せめて使い方がわかるまで勉強したいと思います。

少し、お時間ください

Answer 13

単純にＤｒｏｐＤｏｗｎＬｉｓｔをComboBoxにしたいだけなら、通常のDropDownListと同じようにFormLoadあたりでＤｒｏｐＤｏｗｎＬｉｓｔにデータをバインドして、SurferOnWwwさんの示したリンクにあるサンプルの、styleとscript部分を丸ごとコピーして、最後の

	$(function() {
		$( "#combobox" ).combobox();
		$( "#toggle" ).click(function() {
			$( "#combobox" ).toggle();
		});
	});

を、

        $(function () {
		$( "#<%= DropDownList1.ClientID %>" ).combobox();
        });

にするだけでいけるんじゃないかな。

Answer 14

jqueryUIの設置をformview内に設置する方法がわかりません。

jquery自体を設置する方法はわかったのですが、（試しにTheme設定をしてみました）

masterpageがあるので、そこにjqueryをリンクさせて、他ページを動かす形にしています。

Answer 15

独り言ですか、それとも何か情報を得たいのですか？

また formview とかいい加減な書き方になってますけど、もし、何
か情報が得たいということなら、何を知りたいかきちんと書いたら
どうですか。　

Answer 16

すみません。未だjqueryの勉強をしておりまして、

質問と言うわけではなく、放置がよくないと思い書き込みをしました。

この質問に関してはもう少し知識を得て再度継続させて頂きます。

Answer 17

そうであればその旨書いておかれてはいかがですか。

Answer 18

もうひとつ基本的なことかもしれないのですが、DetailViewやFormView、GridViewに対して、jQueryは使用することができるのでしょうか？

どの本を読んでも、書かれていないのですが、意味の取り違いでしょうか？

Answer 19

> DetailsViewやFormView、GridViewに対して、jQueryは使用する
> ことができるのでしょうか？

DropDownList の話ではなかったのですか？

何にせよ、別のスレッドでも言いましたが、クライアントとサーバ
で起こっていることの区別がついていないと話が通じません。その
あたりを勉強してよく理解してください。

DetailsView, FormView, GridView, DropDownList はサーバーコン
トロールという名前の通りサーバー側での話です。

サーバーでは、それらが html（場合によっては JavaScript, css
にも）に変換されてクライアントに送信されます。送信された後は、
サーバー側ではサーバーコントロールはメモリから消去され、存在
しません。

jQuery はクライアント側の話です。クライアント側で html, css
を操作するのもです。DetailsView, FormView, GridView, DropDownList
のようなサーバーコントロールは関係ありません。

＃もともと ASP.NET はクライアント側で起こっていることをほとん
＃ど意識しないで（html や JavaScript にできるだけ触れずに）済
＃むことが利点だったですが、そのあたりが逆に理解を遅らせること
＃になっているのかもしれませんね。

Answer 20

質問の仕方が間違っていたんですね、すみません。

御指摘があって

http://d.hatena.ne.jp/dproject21/20111005/1317824901

に書かれていることがなんとなく解りました。

このページからすると、jQueryで選択できるということは、各イベントが適用できるということと考えてよろしいのでしょうか？

Answer 21

jQueryからすれば、HTMLの要素をセレクタで指定できれば、後は反映のタイミングだけです。

FormViewの中のDropDownListのcssClassにcomboBoxとかいう架空のスタイルを指定して、$(".comboBox")とかしてしてもいいんじゃないですか？

Answer 22

たとえば、comboBoxなどに、データベースへの反映ないし参照は前回かるあさんがcomboBoxのjQuery構文を示されたような形で指定できるものなのでしょうか？

Answer 23

SurferOnWwwさんもおっしゃっているように、jQueryはクライアント側の、データベースの反映はサーバー側の話です。

jQueryUIのサンプルページで紹介されているComboBoxプラグインは、HTMLのリストボックスをコンボボックスの見た目や動作にするものです。

ASP.NETからみれば単なるasp:dropdownlistです。サーバー側ではasp:dropdownlistに対してプログラミングすれば良いです。

Answer 24

御返答が遅くなりました。

未だ勉強中ですが、datapickerを試しに使用してみました。（簡単そうだったので）

また、随時練習を重ね、ComboBox導入まで頑張りたいと思います

Answer 25

今更で何ですが、単純に ComboBox を適用してもうまく動かないこ
とに気がつきました。

DropDownList は単独ではなくて複数が連動するのでしたよね。つま
り、１ つ目の DropDownList の AutoPostBack を ture に設定して
おいて、１ つ目の選択を変更するとポストバックがかかって、2 つ
目の内容が 1 つ目の選択結果によって変わるというように。

ComboBox を適用して DropDownList を隠してしまうと、AutoPostBack
のためのスクリプトが起動できなくなってしまいます。

Answer 26

参考になりますか？

http://karuakun.wordpress.com/2012/02/17/jqueryui%E3%81%AEautocomplete%E3%81%A8asp-net%E3%81%AE%E9%80%A3%E6%90%BA/

＃こっちにもリンクを書いておいた気がしたんだけれど、うまくポストできていなかったみたい。。。

Answer 27

ComboBox を適用して DropDownList を隠してしまうと、AutoPostBack

のためのスクリプトが起動できなくなってしまいます。

試してないけれど、なんとなくAutoPostBackは動かなそうですね。

まぁそこはjQueryで頑張るとか。

あっ、そういえば昔こんな動かしかたをしました。

http://karua.at.webry.info/200808/article_2.html

Answer 28

皆様ありがとうございます。

動かなかったのがなぜなのかは、わかりませんが、適用することは難しいということは、わかりました。（皆様でも難しいのに私ごときがわかるはずがない）

何かしらで代用できればいいのですが...

Answer 29

かるあさん＞

> まぁそこはjQueryで頑張るとか。

jQuery UI Autocomplete (ComboBox) の select イベントでポストバックを
かければ、とりあえず連動させられることは確認しました。

ただし、しっかり検証してないので、思わぬところで副作用があるかもしれ
ませんけど。

Answer 30

kazukazu2002 さん＞

ComboBox を自分のアプリに適用することはできたのですか？　

AutoPostBack がかからないので 1 つ目の選択を変えても 2 つ目の方は連動
しないという点以外は問題なく動くはずです。

AutoPostBack の問題もたぶん解決可能と思います。

ただし、もっと勉強して、基本的な知識をつけていただかないことには話が
通じないので、掲示板では解決するのは無理だと思いますが。

Answer 31

別スレから解決に至りました。ありがとうございました。