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

  • 質問

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

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

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

    2012年2月10日 2:13

回答

すべての返信

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

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

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

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

    2012年2月10日 3:48
  • 御返答ありがとうございます。

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

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

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

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

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

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

    • 回答としてマーク kazukazu2002 2012年2月10日 4:35
    • 回答としてマークされていない kazukazu2002 2012年2月14日 0:21
    • 回答としてマーク kazukazu2002 2012年4月14日 15:12
    2012年2月10日 4:24
  • すごい!こんなのがあったのですね!探す力の無さに恥ずかしさがこみ上げます。

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

    2012年2月10日 4:35
  • ComboBox には日本語対応の問題があります。

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

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

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

    2012年2月10日 15:59
  • jQuery UI の Autocompleteは予め用意しているリストに対しての機能なのでしょうか?

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

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

    2012年2月14日 0:24
  • データベースから引っ張ってきて、リストをあらかじめ用意しておけばいいのではないでしょうか?
    2012年2月14日 1:16
  • jQuery UIのページにRemote JSONP dataSource というサンプルがあります。$.ajaxの部分をASP.NETのWebサービス呼び出しにすればいけるんじゃないですか?

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

    2012年2月14日 2:29
  • 御返答ありがとうございます。

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

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

    2012年2月14日 5:17
  • 上のページにView Sourceというリンクがあるので、そちらのサンプルを参考にしてください。

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

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

    2012年2月14日 7:14
  • jQuert UI のページで ComboBox として紹介されているものが
    参考になるかも知れません。ASP.NET の DropDownList が使え
    そうな感じです(未検証です)。

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

    2012年2月14日 15:44
  • 御返答ありがとうございます。

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


    少し、お時間ください
    2012年2月15日 2:02
  • 単純にDropDownListをComboBoxにしたいだけなら、通常のDropDownListと同じようにFormLoadあたりでDropDownListにデータをバインドして、SurferOnWwwさんの示したリンクにあるサンプルの、styleとscript部分を丸ごとコピーして、最後の

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

    を、

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

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

    2012年2月15日 11:41
  • jqueryUIの設置をformview内に設置する方法がわかりません。

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

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

    2012年2月21日 6:06
  • 独り言ですか、それとも何か情報を得たいのですか?

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

    2012年2月21日 13:52
  • すみません。未だjqueryの勉強をしておりまして、

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

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

    2012年2月22日 6:43
  • そうであればその旨書いておかれてはいかがですか。
    2012年2月22日 12:41
  • もうひとつ基本的なことかもしれないのですが、DetailViewやFormView、GridViewに対して、jQueryは使用することができるのでしょうか?

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

    2012年2月26日 8:41
  • > DetailsViewやFormView、GridViewに対して、jQueryは使用する
    > ことができるのでしょうか?

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

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

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

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

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


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



    2012年2月26日 9:45
  • 質問の仕方が間違っていたんですね、すみません。

    御指摘があって

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

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

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

    2012年2月27日 1:15
  • jQueryからすれば、HTMLの要素をセレクタで指定できれば、後は反映のタイミングだけです。

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

    2012年2月27日 8:40
  • たとえば、comboBoxなどに、データベースへの反映ないし参照は前回かるあさんがcomboBoxのjQuery構文を示されたような形で指定できるものなのでしょうか?
    2012年2月28日 0:33
  • SurferOnWwwさんもおっしゃっているように、jQueryはクライアント側の、データベースの反映はサーバー側の話です。

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

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

    2012年2月28日 0:53
  • 御返答が遅くなりました。

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

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

    2012年3月13日 5:02
  • 今更で何ですが、単純に ComboBox を適用してもうまく動かないこ
    とに気がつきました。

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

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

    2012年3月14日 12:24
  • 参考になりますか?

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

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

    2012年3月15日 2:43
  • ComboBox を適用して DropDownList を隠してしまうと、AutoPostBack

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

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

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

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

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

    2012年3月15日 2:48
  • 皆様ありがとうございます。

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

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

    2012年3月17日 4:18
  • かるあさん>

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

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

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

    2012年3月17日 5:59
  • kazukazu2002 さん>

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

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

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

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

    2012年3月17日 6:02
  • 別スレから解決に至りました。ありがとうございました。
    2012年4月14日 15:10