web-dev-qa-db-ja.com

エントリを入力するオプションを備えたHTMLコンボボックス

既にリストにある値を選択する以外に、コンボボックスに入力できるという印象を受けました。ただし、これを行う方法に関する情報を見つけることができないようです。テキストの入力を許可するために追加する必要があるプロパティはありますか？

htmlcombobox
65
birdus

datalist（以下の注を参照）の前に、追加のinput要素を指定して、ユーザーが独自のオプションを入力できるようにします。

<select name="example">
  <option value="A">A</option>
  <option value="B">A</option>
  <option value="-">Other</option>
</select>

<input type="text" name="other">

このメカニズムはすべてのブラウザーで機能し、JavaScriptは必要ありません。

「その他」オプションが選択されている場合、inputのみを表示することについて賢明であるために、小さなJavaScriptを使用できます。

datalist要素

datalist要素は、この概念により良いメカニズムを提供することを目的としています。重要なことに、Safari、iOS Safari、Opera Miniではサポートされていません。 Internet Explorerの実装にもいくつかの問題があります。この情報は古くなるため、 現在のデータリストのサポートを確認するために使用できます をチェックして、最新の情報を確認してください。

<input type="text" name="example" list="exampleList">
<datalist id="exampleList">
  <option value="A">  
  <option value="B">
</datalist>
81
Fenton

hTMLでは、これを逆方向に行います。テキスト入力を定義し、それにデータリストを添付します。 （入力のリスト属性に注意してください）。

<input type="text" list="browsers" />

<datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
</datalist>
55
Kristóf Szalay

このリンクはあなたを助けることができます： http://www.scriptol.com/html5/combobox.php

2つの例があります。 html4に1つ、html5に1つ

HTML5

<input type="text" list="browsers"/>
 <datalist id="browsers">
    <option>Google</option>
    <option>IE9</option>
 </datalist>

HTML4

 <input type="text" id="theinput" name="theinput" />
 <select name="thelist" onChange="combo(this, 'theinput')">
   <option>one</option>
   <option>two</option>
   <option>three</option>
 </select>

 function combo(thelist, theinput) {
     theinput = document.getElementById(theinput);
     var idx = thelist.selectedIndex;
     var content = thelist.options[idx].innerHTML;
     theinput.value = content;
 }
21
Celso Soares

ここのdojoの例は、ほとんどの場合、既存のコードに適用すると機能しません。そのため、ここで見つかった代替手段を見つける必要がありました-hxxp：//technologymantrablog.com/how-to-create-a-combo-box-with-text-input-jquery-autocomplete/ ）

archive.org （あまり役に立たない）

ここにjsfiddleがあります- https://jsfiddle.net/ze7fgby7/

6
PeakGen

それは2016年であり、コンボを行う簡単な方法はまだありません...データリストがあることを確認しますが、safari/iosサポートなしでは実際には使用できません。少なくともES6があります。以下は、divまたはspanをラップし、selectの上に入力ボックスを配置して関連イベントをバインドすることでコンボに変換するコンボクラスの試みです。

次のコードを参照してください： https://github.com/kofifus/Combo

（コードは https://github.com/kofifus/New のクラスパターンに依存しています）

コンボの作成は簡単です！ divをコンストラクタに渡すだけです：

let mycombo=Combo.New(document.getElementById('myCombo'));
mycombo.options(['first', 'second', 'third']);

mycombo.onchange=function(e, combo) {
  let val=combo.value;
  // let val=this.value; // same as above
  alert(val);
 }
<script src="https://rawgit.com/kofifus/New/master/new.min.js"></script>
<script src="https://rawgit.com/kofifus/Combo/master/combo.min.js"></script>

<div id="myCombo" style="width:100px;height:20px;"></div>
4
kofifus

これははるかに小さく、jqueryを必要とせず、サファリでより適切に機能します。 https://github.com/Fyrd/purejs-datalist-polyfill/

変更の問題を確認して下矢印を追加します。 https://github.com/Fyrd/purejs-datalist-polyfill/issues

2
tdolphin

私のソリューションは非常にシンプルで、ネイティブの編集可能なコンボボックスとまったく同じように見えますが、IE6でも動作します（ここでいくつかの答えは多くのコードまたは外部ライブラリを必要とし、結果はそうです、例えば、テキストボックスのテキストはコンボボックス」の部分、または編集可能なコンボボックスのようには見えません）。

ポイントは、ドロップダウンアイコンのみをテキストボックスの上に表示するようにコンボボックスをクリップすることです。そして、テキストボックスはコンボボックスの部分の下に少し広いので、右端が見えません-視覚的にコンボボックスを続けます： https://jsfiddle.net/dLsx0c5y/2/

select#programmoduleselect
{
    clip: rect(auto auto auto 331px);
    width: 351px;
    height: 23px;
    z-index: 101; 
    position: absolute;
}

input#programmodule
{
    width: 328px;
    height: 17px;
}

<table><tr>
<th>Programm / Modul:</th>
<td>
    <select id="programmoduleselect"
        onchange="var textbox = document.getElementById('programmodule'); textbox.value = (this.selectedIndex == -1 ? '' : this.options[this.selectedIndex].value); textbox.select(); fireEvent2(textbox, 'change');"
        onclick="this.selectedIndex = -1;">
        <option value=RFEM>RFEM</option>
        <option value=RSTAB>RSTAB</option>
        <option value=STAHL>STAHL</option>
        <option value=BETON>BETON</option>
        <option value=BGDK>BGDK</option>
    </select>
    <input name="programmodule" id="programmodule" value="" autocomplete="off"
        onkeypress="if (event.keyCode == 13) return false;" />
</td>
</tr></table>

（もともとここで使用されていましたが、フォームを送信しないでください：old.dlubal.com/WishedFeatures.aspx）

編集：macOSではスタイルを少し変える必要があります：Chは大丈夫です、FFではコンボボックスの高さを増やし、SafariとOperaはコンボボックスの高さを無視するので、フォントサイズを大きくします（上限があるので、テキストボックスを小さくします）高さを少し）： https://i.stack.imgur.com/efQ9i.png

2
Ladislav Zima

HTMLデータリストタグがまだ完全にサポートされていないことを考えると、私が使用した代替アプローチは Dojo Toolkit ComboBox です。私が検討した他のオプションよりも実装が簡単で、文書化も容易でした。また、既存のフレームワークともうまく機能します。私の場合、このコンボボックスをCodeigniterとBootstrapに基づいた既存のWebサイトに問題なく追加しました。bodyタグではなく、コンボの親要素にDojoテーマ（class = "claro"など）を適用するだけです。スタイリングの競合を避けるため。

まず、Dojoテーマの1つ（「Claro」など）にCSSを含めます。以下のJSファイルの前にCSSファイルを含めることが重要です。

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.9.6/dijit/themes/claro/claro.css" />

次に、CDN経由でjQueryとDojo Toolkitを組み込みます

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.10.3/dojo/dojo.js"></script>

次に、単に Dojoのサンプルコード を実行するか、以下のサンプルを使用して有効なコンボボックスを取得します。

<body>
    <!-- Dojo Dijit ComboBox with 'Claro' theme -->
    <div class="claro"><input id="item_name_1" class=""/></div>

    <script type="text/javascript">
        $(document).ready(function () {
            //In this example, dataStore is simply an array of JSON-encoded id/name pairs
            dataStore = [{"id":"43","name":"Domain Name Renewal"},{"id":"42","name":"Hosting Renewal"}];

            require(
                [ "dojo/store/Memory", "dijit/form/ComboBox", "dojo/domReady!"], 
                function (Memory, ComboBox) {
                    var stateStore = new Memory({
                        data: dataStore
                    });

                    var combo = new ComboBox({
                        id: "item_name_1",
                        name: "desc_1",
                        store: stateStore,
                        searchAttr: "name"},                        
                        "item_name_1"
                        ).startup();

                });

        });

    </script>
</body>
1
Flareman2020