プルダウン 項目が多いので先頭文字とかで検索したい

質問

＜最終的にやりたいこと＞
・プルダウンで目的の項目を出来るだけ簡単に選択したい

＜困っていること＞
・一つのカテゴリーに属する項目がもの凄く多いため、プルダウン項目を選択するのに(探し出すのに)、毎回苦労しています

＜前提条件＞
・根本的な問題は、1カテゴリーに属する項目が多いことにあるのですが、その前提で教えてください
・サイト自体はPHPで作成していて、プルダウン表示項目は、MySQLより取得しています

＜知りたいこと＞
・何か良いアイデアはないでしょうか？
・例えば、プルダウン項目の先頭1文字とかを検索して、該当する項目をプルダウンとして表示させるようなことは出来ないでしょうか？
・あるいは、プルダウン項目を、縦一列ではなくて、画面一杯に表示させるとか、そんなことは出来ないでしょうか？
・項目数が多くても、選択しやすいプルダウン実装方法をご存知の方や、そんな実例を見たことがある方は、是非教えてください、

回答No.4

shockatz · ベストアンサー

jQuery Searchable DropDown Plugin あたりを使えばいかがでしょうか？
http://jsearchdropdown.sourceforge.net/

そもそも、昔のWindowsフォームには、こういう「複合型コンボボックス」があって、大量の項目を選択できていました。
Webになって、こういう部分はユーザビリティが悪くなったのですが、Ajaxの登場で救われることが多いです。

プラグイン側でTextboxのchangeイベントを拾って、$(this).val()を送ってくるので、それを受けてjsonで返すサーバサイドメソッドが必要です。

Ajaxがらみで「選択＋Dropdown」プラグインは他にもいろいろあります。
動作原理はよく似ています。<select>を直接オーバーライドするものが多いので、実装も楽かと。
http://www.jquery4u.com/plugins/10-jquery-selectboxdrop-down-plugins/

お礼

回答ありがとうございました。

＞Ajaxがらみで「選択＋Dropdown」プラグインは他にもいろいろあります
リンク先、大変参考になりましたッ！
自分でも結構探したつもりなのですが、日本語で検索したためか、なかなか思うようなページにたどり着けませんでした。
改めて、海外サイトも探すべきだ、と思いましたー

回答No.3

q-ue

select要素を並べる場合は、例えば、

<div id="pull_down">
<span id="selected_item">選択してください</span>
<div id="items">
<select><option>a</option><option>b</option></select>
<select><option>c</option><option>d</option></select>
</div>
</div>

として、

・<div id="items">を最初非表示にしておく。
・<span id="selected_item">がクリックした時に<div id="items">を表示する。
・<option>が選択された時に、既に選択されたものがあれば、選択解除しておく。必要に応じてname属性の解除、付加も行う。
・<span id="selected_item">のテキストを書き換える。
・<div id="items">を非表示にする。

といった感じでしょうか。
select要素を使わない場合は、上記のselect要素を作成した要素に置き換えます。サーバーに値を送る場合は、input要素を別に用意しておきます。

検索する場合ですが、全データの受信に時間がかからない範囲なら、データ取得後、JavaScriptで検索するのがいいと思います。

お礼

回答ありがとうございました。

質問した時点では、何から手をつけたらよいか、さっぱりだったのですが、
アドバイスのおかげで、大まかながらも幾つかの方針を立てることができました。

これから実際に、色々試していきたいと思いますー

回答No.2

fujillin

違う方法になりますが、プルダウンではなく、例えばここのカテゴリーの選択のようにリンクなどで画面全体を利用して項目を表示して選択するのではいかがでしょうか。
それでも表示できないくらいの項目数であるなら、まず50音で最初の一文字を選択すると、次に、その文字から始まる項目だけの一覧を表示するとか…
いっそのこと50音分のプルダウンを並べてしまうという方法もあるかも知れません。

通常のフォームでも良いですし、リンクでも、あるいはJavascriptを用いたajaxでも良さそうですが。
当然ながら、これに対応したサーバ側のphpなどによるプログラムが必要になりますが、現状でもほぼ同様のものを用意なさっていると思いますので、大きくは変わらないと思います。

補足

回答ありがとうございました。

＞プルダウンではなく、例えばここのカテゴリーの選択のようにリンクなどで画面全体を利用して項目を表示して選択するのではいかがでしょうか
そうですね。この方法は思いつかなかったのですが、
プルダウン項目を見やすくするのと、効果としてはある意味同じなのかもしれません。
だけど、既にフォームで実装しているので、
出来たらそのまま使えるプルダウンで、何か良い方法がないか探してみたいと思います。
どうしてもうまくいかなかった場合には、この方法を検討してみたいと思います

＞まず50音で最初の一文字を選択すると、次に、その文字から始まる項目だけの一覧を表示するとか…
別件で、似た遷移を利用したことがあるのですが、意外に使いづらかったので、
この方法は個人的に避けたいです

＞いっそのこと50音分のプルダウンを並べてしまうという方法もあるかも知れません
そこまで数は多くないのですが、でも、現状の縦1列よりは見やすいかもしれないと思いました

＞現状でもほぼ同様のものを用意なさっていると思いますので、大きくは変わらないと思います
アドバイスありがとうございます。確かに、選択するのに苦労すると言っても、実際には何十分もかかっているわけではないのですが、でも、可能なら少しでもイライラを解消したいと考えています

回答No.1

q-ue

もの凄く多いというのは、具体的にはどのくらいなのでしょうか。

現在は、select要素でプルダウンを表示しているのですか？
それならば、単にselect要素の数を増やして横に並べれば、画面一杯に表示できます。(縦のサイズはsize 属性で指定可)
その場合は、選択された時にJavaScriptで処理をする必要があります。

また、select要素を使わずに、自分でプルダウンメニューを実装するのも手です。

検索で該当する項目を表示させるのも、そこまで大変ではないと思います。

補足

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

＞もの凄く多いというのは、具体的にはどのくらいなのでしょうか。
100件近くあり、今後も増える予定です。いずれはグルーピングすると思うのですが、時期はまだ未定のため、とりあえず何か見やすくする方法はないかと思い、質問しました

＞現在は、select要素でプルダウンを表示しているのですか？
はい。縦1列で

＞それならば、単にselect要素の数を増やして横に並べれば、画面一杯に表示できます。(縦のサイズはsize 属性で指定可)
＞その場合は、選択された時にJavaScriptで処理をする必要があります
その方法を是非教えてください！

＞また、select要素を使わずに、自分でプルダウンメニューを実装するのも手です
どうやって実装するのでしょうか？ コードを一から書いていくということでしょうか？ 参考になるサイトや、検索キーワード等あれば、教えてくださいー

＞検索で該当する項目を表示させるのも、そこまで大変ではないと思います
・イメージ的には、最初にMySQLへアクセスして、全データを取得した後、JavaScriptで何かをやる感じでしょうか？
・それとも、最初にAjax通信か何かで、最初の1文字で検索して、その後、再度、DBアクセスしてプルダウン項目を取得する感じなのでしょうか？
・あるいは、それ以外？