63

ユーザーが事前定義された値を選択できるドロップダウン リストを含むテキスト フィールドを作成したいと考えています。ユーザーは、新しい値を入力するか、ドロップダウン リストから定義済みの値を選択することもできます。そのために 2 つのウィジェットを使用できることはわかっていますが、私のアプリでは、1 つのウィジェットに統合した方が人間工学的に優れています。

標準のウィジェットはありますか、それともサードパーティの JavaScript を使用する必要がありますか?

ブラウザの移植性はどうですか？

4

11 に答える 11

137

<datalist>これは、HTML5の タグを使用して実現できます。

<input type="text" name="product" list="productName"/>
    <datalist id="productName">
        <option value="Pen">Pen</option>
        <option value="Pencil">Pencil</option>
        <option value="Paper">Paper</option>
    </datalist>

ブラウザで入力テキストをダブルクリックすると、定義されたオプションのリストが表示されます。

于 2013-07-15T16:03:24.723 に答える
16

これを行う最善の方法は、おそらくサードパーティのライブラリを使用することです。

あなたが探しているものの実装がjQuery UI jQuery UIとdojo dojoにあります。jQuery の方が一般的ですが、dojo を使用すると HTML でウィジェットを宣言的に定義できます。

どちらを使用するかはスタイルによって異なりますが、どちらもクロス ブラウザー作業用に開発されており、コードをコピー アンド ペーストするよりも頻繁に更新されます。

于 2008-11-05T16:05:42.753 に答える
14

CSS と 1 行の JavaScript コードに基づく非常に単純な実装 (基本的な機能のみ)。

.dropdown {
  position: relative;
  width: 200px;
}

.dropdown select {
  width: 100%;
}

.dropdown > * {
  box-sizing: border-box;
  height: 1.5em;
}

.dropdown input {
  position: absolute;
  width: calc(100% - 20px);
}
<div class="dropdown">
  <input type="text" />
  <select  onchange="this.previousElementSibling.value=this.value; this.previousElementSibling.focus()">
    <option>This is option 1</option>
    <option>Option 2</option>
  </select>
</div>

注意:古いブラウザー(IE9 未満)ではサポートされpreviousElementSibling()ていないものを使用します。

于 2015-07-17T11:16:17.743 に答える
8

この<select>タグでは、定義済みのエントリのみを使用できます。この問題の一般的な解決策は、「その他」というラベルの付いたエントリを 1 つ作成し、編集フィールドを無効にすることです ( <input type="text")。[その他] が選択されている場合にのみ編集フィールドを有効にする JavaScript を追加します。

直接編集できるドロップダウンを何らかの形で作成することは可能かもしれませんが、IMO は努力する価値はありません。もしそうなら、Amazon、Google、または Microsoft がそれを行っているでしょう ;-) 最も単純なソリューションで仕事を終わらせるだけです。それはより速く（あなたの上司はそれを好むかもしれません）、通常は維持するのがより簡単です（あなたはそれを好むかもしれません）.

于 2008-11-05T09:05:15.380 に答える
4

ComboBox with TextBox (定義済みの値とユーザー定義の値用。)

ComboBox with TextBox (ここをクリック)

于 2014-12-18T12:31:39.590 に答える
1

JavaScriptなしで自動的に行う方法があるかどうかはわかりません。

必要なのは、ユーザーが選択を行ったときにフォームをサーバーに送信するためにブラウザ側で実行されるものです。したがって、javascript.

また、javascript をオフにしているユーザーのために、別の手段 (送信ボタンなど) があることを確認してください。

良い例: Combo-Box Viewer

昨日、このdhtmlxComboを使用して、さらに洗練されたコンボボックスを作成し、ajax を使用して大量のデータから適切な値を取得しました。

于 2008-11-05T09:02:43.560 に答える
1

残念ながら、コンボボックスは HTML 仕様から除外されたものです。

残念ながら、それを管理する唯一の方法は、独自に作成するか、事前に構築されたものを使用することです. これは非常にシンプルに見えます。残念ながら、商用利用には料金を支払う必要がありますが、私はこれをオープンソース アプリに使用しています。

于 2008-11-05T09:05:40.403 に答える
1

ちょっとした CSS で フィドルは完了です

<div style="position: absolute;top: 32px; left: 430px;" id="outerFilterDiv">
<input name="filterTextField" type="text" id="filterTextField" tabindex="2"  style="width: 140px;
    position: absolute; top: 1px; left: 1px; z-index: 2;border:none;" />
        <div style="position: absolute;" id="filterDropdownDiv">
<select name="filterDropDown" id="filterDropDown" tabindex="1000"
    onchange="DropDownTextToBox(this,'filterTextField');" style="position: absolute;
    top: 0px; left: 0px; z-index: 1; width: 165px;">
    <option value="-1" selected="selected" disabled="disabled">-- Select Column Name --</option>
</select>

于 2013-10-08T04:46:07.140 に答える