92

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

4

11 に答える 11

128

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

于 2013-01-30T22:07:56.150 に答える
63

HTMLでは、これを逆方向に行います。テキスト入力を定義します。

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

データリストを添付します。（入力のlist属性に注意してください）。

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
于 2014-04-02T08:27:55.540 に答える
25

このリンクはあなたを助けることができます： 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;
 }
于 2013-11-21T17:20:36.707 に答える
6

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

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

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

于 2016-09-20T04:52:45.207 に答える
4

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

于 2016-08-19T10:34:07.560 に答える
3

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

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

于 2017-01-11T00:29:53.197 に答える
2

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

于 2017-04-07T12:54:45.777 に答える
1

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

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

于 2013-01-30T22:09:50.193 に答える
-1

他の答えはどれも満足のいくものではありませんでした。これは主に、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>

于 2019-09-19T15:30:58.233 に答える
-2 
    <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>

クリックして出力画面を表示

ありがとう...：）

于 2016-08-09T17:18:14.380 に答える