• ベストアンサー

[Javascript]テキストボックス入力でコンボ絞込みの技!?

おはよう御座います。 WEBアプリを開発しています者で、困っておりますのでHELPです! テキストボックスとドロップダウンボックスが並んでいます。 ドロップの中には・・・ (value / 表示値) aaa / 商品A と abc / 商品B と bbb / 商品C と caa / 商品D という4つが入っているとします。 テキストボックスに a と入れるとA,Bだけに絞り込まれ、 次に b (このとき ab)を入れるとBだけに絞り込まれるというような技はありませんか?? また、完全に絞り込まれて表示までもなくなるまでいかずしても、選択されているアイテムが変わるだけでもいいのですが・・・。 実際はドロップ内に30以上の選択内容が入っているためドロップで探して選択・・・ということができる状況にはないのです。 テキストで入力しながら絞り込むなどができれば非常に便利になります。 是非とも宜しくお願いいたします。 近い内容が紹介されているサイトの紹介でもかまいませんので宜しくお願いいたします!

質問者が選んだベストアンサー

  • ベストアンサー
  • ryota2
  • ベストアンサー率43% (61/140)
回答No.1

<html> <head> <script type="text/javascript"><!-- function ct(obj){ for(var i = 0; i < document.mf.sl.options.length; i++){ if(!eval("document.mf.sl.options[i].value.match(/^"+obj.value+".*/)")){ document.mf.sl.options[i].style.backgroundColor="gray"; } else{ document.mf.sl.options[i].style.backgroundColor="white"; if(document.mf.sl.options[document.mf.sl.selectedIndex].style.backgroundColor=="gray")document.mf.sl.selectedIndex=i; } } } //--></script> </head> <body> <form name="mf"> <input type="text" onChange="ct(this)"> <select name="sl"> <option value="aaa">商品A</option> <option value="abc">商品B</option> <option value="bbb">商品C</option> <option value="caa">商品D</option> </select> </form> </body> </html> 一致しないところを灰色にします。 そして、白いところの一番上を選択します。 多分ネットスケープは対応していないかと

その他の回答 (1)

  • mirurin
  • ベストアンサー率43% (48/111)
回答No.2

<script> function set(){ f.sel.options[0] = new Option("商品A","aaa"); f.sel.options[1] = new Option("商品B","abc"); f.sel.options[2] = new Option("商品C","bbb"); f.sel.options[3] = new Option("商品D","caa"); } function txtchange() { set(); for (i=0; i<f.sel.length; i++) { if (f.sel(i).value.search(f.txt.value) != 0) { f.sel.options[i] = null; i--; } } } </script> <body onLoad="set();"> <form name="f"> <input name="txt" type=text onkeyup="txtchange()"> <select name="sel"></select> </form> </body>

関連するQ&A

  • ExcelVBA コンボボックスに入力があったらリンクしてテキストボックスを更新したい

    フォームで入力画面をつくっています。 あるコンボボックスのリストから項目が選択されたら、一覧からリンクさせてテキストボックスの内容を更新がしたいのです。 例えば「社員コード」のコンボボックスで「3」が選択されたら、「社員名」のテキストボックスに別シートに作成してある社員一覧から「太郎」が表示されるというようにです。 セルA1とコンボボックスをリンクさせ、セルB1にVLOOKUP(A1,一覧,2)で一覧から名前を抽出しました。コンボボックスのChangeイベントでB1の内容をテキストボックスへ送っているのですが、カーソルを別の項目へ移動するまではテキストボックスの内容が更新されません。 コンボボックスのリストを選択した時点でテキストボックスを更新する方法はないでしょうか?

  • テキストボックスの入力抑制

    使用言語はVB.NETです。 フォームAのテキストボックスAに文字を入力し確定すると、 フォームBが起動、フォームBのテキストボックスには、 テキストボックスAで入力した内容が表示されており、それを 変更することはできない。 ただし、テキストボックスAに何も入力せずに起動した場合、 テキストボックスBの内容は書き換え可能、というようなものを 作りたいと思っています。 また、テキストボックスBを入力不可にするには、Enabled=False 以外の方法で行いたいのです。 例えば、テキストボックスAで1と入れた場合、テキストボックスBの 初期表示1をBSで消しても、違う値をいれても、常に1に表示が戻される、 というようなものにしたいのですが…。 上記のようなものを作るには、どのように処理を作っていけば 良いのでしょうか? サンプル的なコードを教えていただけるとありがたいです。 よろしくお願いします。

  • 抽出条件入力用テキストボックスが空白の場合の抽出条件

    SQL初心者です。 今あるテーブル(TABLE)に | VALUE_A | VALUE_B | VALUE_C | VALUE_D | ----------------------------------------- | 000 | AAA | AAA | AAA | | 001 | AAA | AAA | BBB | | 002 | AAA | BBB | AAA | | 003 | BBB | BBB | BBB | | 004 | BBB | BBB | NULL | のようなデータが入っているとします。 Web上から VALUE_B VALUE_C VALUE_D に対しそれぞれテキストボックス入力フィールドから値を入力し検索を行うようにしたいのです。 [VALUE_B]=AAA [VALUE_C]=AAA [VALUE_D]=AAA と入力されれば VALUE_A:000 を検索結果として出します。 [VALUE_B]=AAA [VALUE_D]=AAA と入力されれば VALUE_A:000 VALUE_A:002 を検索結果として出します。 [VALUE_B]=AAA だけが入力された場合は VALUE_A:001 VALUE_A:002 VALUE_A:003 を検索結果として出します。 つまり、フォームのテキストボックスに入力された条件で抽出し、入力が無い場合は全件抽出を行いたいのです。 この場合、どのようなSQLを組めばよいのかわかりません。ANDやORだけでは対応できないような気がします。Oracleを始めたばかりということもあり、どのような関数を使えばよいのかもわかりません。どなたかご教授いただけませんでしょうか??よろしくお願いします。

  • VBA コンボボックス

    VBAコンボボックスで AAAを選択→処理A BBBを選択→処理B CCCを選択→処理C としている場合、 AAAを選択→処理Aの後、コンボボックスで再度AAAをクリックしても次の処理Aにいきません。いったんBBBをクリックしてしてAAAをクリックすると処理Aに行きますが、連続AAAをクリックして処理Aはできないでしょうか。 何か方法はありませんか? Private Sub ComboBox1_Change() If ComboBox1.Value = "AAA" Then   ’処理Aへ ElseIf ComboBox1.Value = "BBB" Then   ’処理Bへ Else   ’処理Cへ End If End Sub

  • VBでコンボボックスとテキストボックスの連係

    VBでフォームにデータコンボボックスとテキストボックスを一つづつ作り、データコンボボックスで値を選択し、その値に対する値をテキストボックスに表示させたいんですがどうすればいいでしょうか? データコンボボックスで選択する元になるテーブルは ID | 商品 1 | みかん 2 | ばなな 3 | りんご と、上記のような形のテーブルをもちいています。 例えばデータコンボボックスで「1」を選択した場合テキストボックスに「みかん」と表示させたいです。

  • EXCEL コンボボックスを使ってツリー状に選択

      ABC 1 あ       左のようなセルを使ってツリー状にした表から 2  AAA    別シートにコンボボックスを横に3つ作成して 3  BBB    ”あ”を選択したら隣のボックスに”AAA” 4   111   と”BBB”の選択肢が現れ、”BBB”を選 5   222   択したらその隣のボックスに”111”と”222” 6 い       の選択肢が現れる といったことが出来ないでしょ 7  aaa    うか? 8   333    9  bbb    説明がやっかいだと思いますので、「こんな本で見た」           という覚えがある方がいらっしゃいましたら是非教えて           下さい。お願いします。

  • コンボボックス

    コンボボックスから選択した内容によってそれに関するコンボボックスの内容を変えたいと思っています。 例えば コンボボックスA 書類1  分類a 書類2  分類a 書類3  分類b 書類4  分類c コンボボックスB 提出先1  分類a 提出先2  分類b 提出先3  分類b 提出先4  分類c と言う風になっているのですが、 コンボボックスAの書類1を選択したらコンボボックスB と共通の分類の提出先名がコンボボックスに表示したいのです。 書類3を選択すると、コンボボックスBには提出先2、提出先3が表示されるといった感じです。 ACCESS2000を使用しています。 よろしくお願いします。

  • コンボボックスでデータ入力

    Access 2000 フォームにコンボボックスとテキストボックスを配置しています。 コンボボックスには種別[A][B][C]を選択できるようにし、 テキストボックスには納期日の「年」「月」「日」の3つのテキストボックスを 配置しました。 「種別」「納期日」を入力後、実行ボタンをクリックすると テーブル「T_商品」の種別フィールド、納期日フィールドに NULL値のフィールドに一括でデータを入力したいと考えております。 どのようにすればいいのでしょうかよろしくお願いします。

  • テキストボックスへの入力

    アクセス97にてソフト開発をしております フォームAの「合計」テキストボックスに表示されている数字を、フォームAを閉じたときにフォームBの「金額」テキストボックスに入力できるようにしたいのですが、 どの様にすればいいのでしょうか この二つのテキストボックスはODBCリンクテーブルと連結しています

  • テキストボックスに入力された内容を他のテキストボックスにコピーしたい

    テキストボックスA、Bがあるとして、テキストボックスAに何らかの文字列を入力します。 その状態でボタンを押すと、テキストボックスAの内容をテキストボックスBにコピーするようにしたいのですが、このようなことはjavascriptで可能でしょうか?

専門家に質問してみよう