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

Question 1

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

Question 2

以前datalist（下記の注を参照）、ユーザーがinput独自のオプションを入力するための追加の要素を提供していました。

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

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

スニペットを展開

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

ちょっとしたJavaScriptを使用してinput、「その他」オプションが選択されている場合にのみ表示することを賢くすることができます。

データリスト要素

このdatalist要素は、この概念のより良いメカニズムを提供することを目的としています。iOS Safari <12.2などの一部のブラウザでは、これがサポートされていないか、実装に問題がありました。現在のデータリストのサポートを確認するには、[使用できますか]ページを確認してください。

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

スニペットを展開

Question 3

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>

Question 4

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

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

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;
 }

Question 5

ここでのdojo例は、ほとんどの場合、既存のコードに適用すると機能しません。そのため、ここにある代替手段を見つける必要がありました-hxxp：//technologymantrablog.com/how-to-create-a-combo-box-with-text-input-jquery-autocomplete/（現在はスパムサイトまたはそれより悪いサイトを指しています）

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

これがjsfiddleです-https ： //jsfiddle.net/ze7fgby7/

Question 6

さて、それは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>

スニペットを展開

Question 7

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

下向き矢印を追加するための変更の問題を確認してください。 https://github.com/Fyrd/purejs-datalist-polyfill/issues

Question 8

私のソリューションは非常にシンプルで、ネイティブの編集可能なコンボボックスとまったく同じように見えますが、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

Question 9

HTMLデータリストタグがまだ完全にはサポートされていないことを考えると、私が使用した別のアプローチはDojo ToolkitComboBoxです。です。私が調査した他のオプションよりも実装が簡単で、文書化も優れていました。また、既存のフレームワークともうまく連携します。私の場合、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とDojoToolkitを含めます

<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>

Question 10

このサイトでComboBoxまたはComboを見てください：http：//www.jeasyui.com/documentation/index.php#

Question 11

    <html>
<head>
    <title></title>
    <script src="jquery-3.1.0.js"></script>
    <script>
        $(function () {
            $('#selectnumber').change(function(){
                alert('.val() = ' + $('#selectnumber').val() + '  AND  html() = ' + $('#selectnumber option:selected').html() + '  AND .text() = ' + $('#selectnumber option:selected').text());
            })
        });
    </script>
</head>
<body>
       <div>
        <select id="selectnumber">
            <option value="1">one</option>
            <option value="2">two</option>
            <option value="3">three</option>
            <option value="4">four</option>
        </select>

    </div>
   </body>
</html>

ありがとう... :)

Question 12

他の回答はどれも満足のいくものではありませんでした。これは主に、UIがまだ悪いように見えるためです。私はこれを見つけましたは見栄えがよく、完璧に近く、カスタマイズも可能です。

例やオプションなどの完全なリストはここにありますが、基本的なデモは次のとおりです。

$('#editable-select').editableSelect();

<link href="https://cdn.jsdelivr.net/npm/jquery-editable-select@2.2.5/dist/jquery-editable-select.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-editable-select@2.2.5/dist/jquery-editable-select.min.js"></script>

<select id="editable-select">
	<option>Alfa Romeo</option>
	<option>Audi</option>
	<option>BMW</option>
	<option>Citroen</option>
</select>

スニペットを展開