Editierbares 'Select'-Element

Question

Ich hätte gerne ein Select-Element im Formular, aber neben den Optionen im Dropdown wäre es nützlich, in der Lage zu sein, es zu bearbeiten und neue Option hinzufügen, aber nicht mit einem anderen Eingabetext, den ich brauche alles auf einmal. Ist es möglich?

Answer 1

Nichts ist unmöglich. Hier ist eine Lösung, die einfach den Wert einer Texteingabe einstellt, wenn sich der Wert <select> ändert: Demo on JSFiddle
Rendering wurde in Firefox und Google Chrome getestet.

<style> 
    .select-editable { position:relative; background-color:white; border:solid grey 1px; width:120px; height:18px; } 
    .select-editable select { position:absolute; top:0px; left:0px; font-size:14px; border:none; width:120px; margin:0; } 
    .select-editable input { position:absolute; top:0px; left:0px; width:100px; padding:1px; font-size:12px; border:none; } 
    .select-editable select:focus, .select-editable input:focus { outline:none; } 
</style> 

<div class="select-editable"> 
    <select onchange="this.nextElementSibling.value=this.value"> 
    <option value=""></option> 
    <option value="115x175 mm">115x175 mm</option> 
    <option value="120x160 mm">120x160 mm</option> 
    <option value="120x287 mm">120x287 mm</option> 
    </select> 
    <input type="text" name="format" value=""/> 
</div> 

Sie können dies auch mit dem Eingang list Attribut in HTML5 tun und <datalist> element:

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

Answer 2

Ähnliche oben zu beantworten, aber ohne die absolute Positionierung:

<select style="width: 200px; float: left;" onchange="this.nextElementSibling.value=this.value"> 
    <option></option> 
    <option>1</option> 
    <option>2</option> 
    <option>3</option> 
</select> 
<input style="width: 185px; margin-left: -199px; margin-top: 1px; border: none; float: left;"/> 

erstellen So eine Eingangs Box und setzen Sie es über die Oberseite der Combobox

Answer 3

Basierend auf den anderen Antworten, hier ist ein erster Entwurf für die Verwendung mit Knockout:

Nutzungs

 <div data-bind="editableSelect: {options: optionsObservable, value: nameObservable}"></div> 

Daten Knockout

composition.addBindingHandler('editableSelect', 
    { 
    init: function(hostElement, valueAccessor) { 

     var optionsObservable = getOptionsObservable(); 
     var valueObservable = getValueObservable(); 

     var $editableSelect = $(hostElement); 
     $editableSelect.addClass('select-editable'); 

     var editableSelect = $editableSelect[0]; 

     var viewModel = new editableSelectViewModel(optionsObservable, valueObservable); 
     ko.applyBindingsToNode(editableSelect, { compose: viewModel }); 

     //tell knockout to not apply bindings twice 
     return { controlsDescendantBindings: true }; 

     function getOptionsObservable() { 
     var accessor = valueAccessor(); 
     return getAttribute(accessor, 'options'); 
     } 

     function getValueObservable() { 
     var accessor = valueAccessor(); 
     return getAttribute(accessor, 'value'); 
     } 
    } 
    }); 

Ansicht

<select 
    data-bind="options: options, event:{ focus: resetComboBoxValue, change: setTextFieldValue} " 
    id="comboBox" 
    ></select> 
<input 
    data-bind="value: value, , event:{ focus: textFieldGotFocus, focusout: textFieldLostFocus}" 
    id="textField" 
    type="text"/> 

Bindung

Ansichtsmodell

define([ 
    'lodash', 
    'services/errorHandler' 
], function(
    _, 
    errorhandler 
) { 

    var viewModel = function(optionsObservable, valueObservable) { 

    var self = this; 
    self.options = optionsObservable(); 
    self.value = valueObservable; 
    self.resetComboBoxValue = resetComboBoxValue; 
    self.setTextFieldValue = setTextFieldValue; 
    self.textFieldGotFocus = textFieldGotFocus; 
    self.textFieldLostFocus = textFieldLostFocus; 

    function resetComboBoxValue() { 
     $('#comboBox').val(null); 
    } 

    function setTextFieldValue() { 
     var selection = $('#comboBox').val(); 
     self.value(selection); 
    } 

    function textFieldGotFocus() { 
     $('#comboBox').addClass('select-editable-input-focus'); 

    } 

    function textFieldLostFocus() { 
     $('#comboBox').removeClass('select-editable-input-focus'); 
    } 

    }; 
    errorhandler.includeIn(viewModel); 

    return viewModel; 
}); 

CSS

.select-editable { 

    display: block; 
    width: 100%; 
    height: 31px; 
    padding: 6px 12px; 
    font-size: 12px; 
    line-height: 1.42857143; 
    color: #555555; 
    background-color: #ffffff; 
    background-image: none; 
    border: 1px solid #cccccc; 
    border-radius: 0px; 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; 
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;padding: 0; 
} 


.select-editable select { 
    outline:0; 
    padding-left: 10px; 
    border:none; 
    width:100%; 
    height: 29px; 
} 


.select-editable input { 
    outline:0; 
    position: relative; 
    top: -27px; 
    margin-left: 10px; 
    width:90%; 
    height: 25px; 
    border:none; 
} 

.select-editable select:focus { 
    outline:0; 
    border: 1px solid #66afe9; 
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6); 
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6); 
} 




.select-editable input:focus { 
    outline:0; 
} 

.select-editable-input-focus { 
outline:0; 
    border: 1px solid #66afe9 !important; 
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6); 
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6); 
}