Wie kann ich ein bearbeitbares Kombinationsfeld in HTML/Javascript erstellen?

Ich muss Benutzern die Auswahl eines Elements aus einer Dropdown-Liste ermöglichen, ihnen aber auch erlauben, stattdessen beliebigen Text einzugeben, selbst wenn er nicht mit einem Element in der Liste übereinstimmt. Wie kann ich das auf einer Webseite mit HTML und Javascript erreichen?

Die select Feld lässt Benutzer keinen Text eingeben, und das input Textfeld zeigt nicht die bevorzugten Alternativen.

Alle Elemente müssen angezeigt werden, wenn der Benutzer das Dropdown-Menü öffnet, daher kann es sich nicht um eine einfache automatische Vervollständigung handeln, die nur übereinstimmende Elemente anzeigt.

Hier ist ein Skript dafür:
Demo,
Quelle

Oder eine andere, die etwas anders funktioniert:
Link entfernt (Seite existiert nicht mehr)

Ich weiß, dass diese Frage bereits vor langer Zeit beantwortet wurde, aber dies ist für andere Leute, die hier landen und Probleme haben, das zu finden, was sie brauchen. Ich hatte Probleme, ein vorhandenes Plugin zu finden, das genau das tat, was ich brauchte, also schrieb ich mein eigenes jQuery-UI-Plugin, um diese Aufgabe zu erfüllen. Es basiert auf dem Combobox-Beispiel auf der jQuery-UI-Site. Hoffentlich hilft es jemandem.

https://github.com/tmooney3979/jquery.ui.combify

Sie können meine Implementierung der bearbeitbaren Combobox ausprobieren http://www.zoonman.com/projects/combobox/

Ich suchte auch nach einer Antwort, aber alles, was ich finden konnte, war veraltet.

Dieses Problem ist seit HTML5 behoben: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist

<label>Choose a browser from this list:
<input list="browsers" name="myBrowser" /></label>
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
  <option value="Microsoft Edge">
</datalist>

Wenn ich das nicht gefunden hätte, wäre ich mit diesem Ansatz gegangen:

http://www.dhtmlgoodies.com/scripts/form_widget_editable_select/form_widget_editable_select.html

Ich denke, das wird deinen Anforderungen entsprechen:

https://github.com/RUPOJS/jsCombo

Vergessen Sie das Datalist-Element, das eine gute Lösung für die Autocomplete-Funktion ist, aber nicht für die Combobox-Funktion.

CSS:

.combobox {
    display: inline-block;
    position: relative;
}

.combobox select {
    display: none;
    position: absolute;
    overflow-y: auto;
}

html:

<div class="combobox">
    <input type="number" name="" value="" min="" max="" step=""/><br/>
    <select size="3">
        <option value="0"> 0</option>
        <option value="25"> 25</option>
        <option value="40"> 40</option>
    </select>
</div>

js (jQuery):

$('.combobox').each(function() {
    var
        $input = $(this).find('input'),
        $select = $(this).find('select');
    function hideSelect() {
        setTimeout(function() {
            if (!$select.is(':focus') && !$input.is(':focus')) {
                $select
                    .hide()
                    .css('z-index', 1);
            }
        }, 20);
    }
    $input
        .focusin(function() {
            if (!$select.is(':visible')) {
                $select
                    .outerWidth($input.outerWidth())
                    .show()
                    .css('z-index', 100);
            }
        })
        .focusout(hideSelect)
        .on('input', function() {
            $select.val('');
        });
    $select
        .change(function() {
            $input.val($select.val());
        })
        .focusout(hideSelect);
});

Dies funktioniert auch dann einwandfrei, wenn Sie Texteingabe anstelle von Zahlen verwenden.

versuchen Sie dies zu tun

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

Bitte sehen Sie sich das folgende Beispiel an Geige