Ich hatte den Eindruck, Sie könnten neben der Auswahl von Werten, die bereits in der Liste enthalten sind, auch ein Kombinationsfeld eingeben. Ich kann jedoch keine Informationen dazu finden. Gibt es eine Eigenschaft, die ich hinzufügen muss, um die Eingabe von Text zu ermöglichen?

Vorher datalist(siehe Hinweis unten) würden Sie ein zusätzliches inputElement bereitstellen , damit die Benutzer ihre eigene Option eingeben können.

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

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

Dieser Mechanismus funktioniert in allen Browsern und erfordert kein JavaScript .

Sie könnten ein wenig JavaScript verwenden, um klug zu sein, inputwenn nur die Option "Andere" ausgewählt wird.

Datenelement

Das datalistElement soll einen besseren Mechanismus für dieses Konzept bieten. In einigen Browsern, z. B. iOS Safari <12.2, wurde dies nicht unterstützt oder die Implementierung hatte Probleme. Auf der Seite Kann ich verwenden können Sie die aktuelle Unterstützung für Datenlisten anzeigen .

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

In HTML machen Sie dies rückwärts: Sie definieren eine Texteingabe:

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

und fügen Sie einen Datalisten hinzu. (Beachten Sie das Listenattribut der Eingabe).

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist> 

Dieser Link kann Ihnen helfen: http://www.scriptol.com/html5/combobox.php

Sie haben zwei Beispiele. Eine in HTML4 und eine in 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;
 }

Das dojo Beispiel hier funktioniert in den meisten Fällen nicht, wenn es auf vorhandenen Code angewendet wird. Dafür musste ich eine Alternative finden, die hier zu finden ist - hxxp: //technologymantrablog.com/how-to-create-a-combo-box-with-text-input-jquery-autocomplete/ (zeigt jetzt auf eine Spam-Site oder noch schlimmer) )

archive.org (nicht sehr nützlich)

Hier ist die jsfiddle - https://jsfiddle.net/ze7fgby7/

Nun, es ist 2016 und es gibt immer noch keine einfache Möglichkeit, eine Combo zu erstellen ... sicher, wir haben einen Datalisten, aber ohne Safari / iOS-Unterstützung ist es nicht wirklich brauchbar. Zumindest haben wir ES6 .. unten ist ein Versuch einer Combo-Klasse, die ein Div oder einen Span umschließt und es in eine Combo verwandelt, indem ein Eingabefeld über die Auswahl gesetzt und die relevanten Ereignisse gebunden werden.

Siehe den Code unter: https://github.com/kofifus/Combo

(Der Code basiert auf dem Klassenmuster von https://github.com/kofifus/New. )

Das Erstellen einer Combo ist einfach! Übergebe einfach ein Div an seinen Konstruktor:

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>

Dieser ist viel kleiner, erfordert keine Abfrage und funktioniert besser auf Safari. https://github.com/Fyrd/purejs-datalist-polyfill/

Überprüfen Sie die Probleme für die Änderung, um einen Downarrow hinzuzufügen. https://github.com/Fyrd/purejs-datalist-polyfill/issues

Meine Lösung ist sehr einfach, sieht genauso aus wie eine native bearbeitbare Combobox und funktioniert auch in IE6 (einige Antworten hier erfordern viel Code oder externe Bibliotheken, und das Ergebnis ist so, z. B. der Text im Textfeld steht hinter dem Dropdown-Symbol von der Combobox-Teil oder es sieht überhaupt nicht wie eine bearbeitbare Combobox aus).

Der Punkt ist, die Combobox nur mit dem Dropdown-Symbol zu beschneiden, das über dem Textfeld sichtbar ist. Und das Textfeld ist etwas breit unter dem Teil der Combobox, sodass Sie das rechte Ende nicht sehen - visuell geht es mit der Combobox weiter: 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>

(Wird ursprünglich zB hier verwendet, aber senden Sie das Formular nicht: old.dlubal.com/WishedFeatures.aspx)

BEARBEITEN: Die Stile müssen für macOS etwas anders sein: Ch ist in Ordnung, für FF erhöhen Sie die Höhe der Combobox, Safari und Opera ignorieren die Höhe der Combobox, erhöhen Sie also ihre Schriftgröße (hat eine Obergrenze, verringern Sie dann das Textfeld). Höhe etwas): https://i.stack.imgur.com/efQ9i.png

Da das HTML-Datenlisten-Tag immer noch nicht vollständig unterstützt wird, habe ich als alternativen Ansatz die Dojo Toolkit ComboBox verwendet . Es war einfacher zu implementieren und besser dokumentiert als andere Optionen, die ich untersucht habe. Es spielt sich auch gut mit vorhandenen Frameworks. In meinem Fall habe ich diese Combobox ohne Probleme zu einer vorhandenen Website hinzugefügt, die auf Codeigniter und Bootstrap basiert. Sie müssen lediglich sicherstellen, dass das Dojo-Thema (z. B. class = "claro") anstelle des body-Tags auf das übergeordnete Element der Combo angewendet wird Styling-Konflikte zu vermeiden.

Fügen Sie zunächst das CSS für eines der Dojo-Themen ein (z. B. 'Claro'). Es ist wichtig, dass die CSS-Datei vor den folgenden JS-Dateien enthalten ist.

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

Fügen Sie als Nächstes jQuery und Dojo Toolkit über CDN hinzu

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

Als nächstes können Sie einfach dem Beispielcode von Dojo folgen oder das folgende Beispiel verwenden, um eine funktionierende Combobox zu erhalten.

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

Schauen Sie sich ComboBox oder Combo auf dieser Website an: http://www.jeasyui.com/documentation/index.php#

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

Vielen Dank...:)

Keine der anderen Antworten war zufriedenstellend, hauptsächlich weil die Benutzeroberfläche immer noch schlecht aussieht. Ich fand das , was gut aussieht und fast perfekt und anpassbar ist.

Eine vollständige Liste der Beispiele und Optionen und dergleichen finden Sie hier , aber hier ist eine grundlegende Demo:

$('#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>