HTML-форма выбора с возможностью ввода пользовательского значения

Question 1

Я хотел бы иметь поле ввода, в которое пользователи могут вводить пользовательское текстовое значение или выбирать из раскрывающегося списка. Обычный <select>предлагает только выпадающие варианты.

Как я могу <select>принять индивидуальное значение? Например: Форд?

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Question 2

HTML5 имеет встроенное поле со списком. Вы создаете текст inputи файл datalist. Затем добавить listатрибут к input, со значением из idиз datalist.

Обновление: по состоянию на март 2019 года все основные браузеры (теперь включая Safari 12.1 и iOS Safari 12.3) поддерживают datalistуровень, необходимый для этой функции. См. Caniuse для подробной поддержки браузера.

Выглядит это так:

<input type="text" list="cars" />
<datalist id="cars">
  <option>Volvo</option>
  <option>Saab</option>
  <option>Mercedes</option>
  <option>Audi</option>
</datalist>

Развернуть фрагмент

Question 3

Последний JSFiddle от Алена Саке не переключался для меня в Firefox, поэтому я подумал, что предоставлю простой обходной путь html / javascript, который будет хорошо работать в формах (относительно отправки) до того дня, когда тег datalist будет принят всеми браузерами / устройствами. Для получения дополнительных сведений и ознакомления с этим в действии перейдите по адресу : http://jsfiddle.net/6nq7w/4/ Примечание. Не допускайте пробелов между переключаемыми братьями и сестрами!

<!DOCTYPE html>
<html>
<script>
function toggleField(hideObj,showObj){
  hideObj.disabled=true;        
  hideObj.style.display='none';
  showObj.disabled=false;   
  showObj.style.display='inline';
  showObj.focus();
}
</script>
<body>
<form name="BrowserSurvey" action="#">
Browser: <select name="browser" 
          onchange="if(this.options[this.selectedIndex].value=='customOption'){
              toggleField(this,this.nextSibling);
              this.selectedIndex='0';
          }">
            <option></option>
            <option value="customOption">[type a custom value]</option>
            <option>Chrome</option>
            <option>Firefox</option>
            <option>Internet Explorer</option>
            <option>Opera</option>
            <option>Safari</option>
        </select><input name="browser" style="display:none;" disabled="disabled" 
            onblur="if(this.value==''){toggleField(this,this.previousSibling);}">
<input type="submit" value="Submit">
</form>
</body>
</html>

Question 4

Решение jQuery!

Демо: http://jsfiddle.net/69wP6/2/

Еще одна демонстрация ниже (обновлена!)

Мне нужно было что-то подобное в случае, когда у меня были фиксированные параметры, и я хотел, чтобы еще один вариант можно было редактировать! В этом случае я сделал скрытый ввод, который перекрывал бы опцию выбора и был бы редактируемым, и использовал jQuery, чтобы все это работало без проблем.

Я делюсь со всеми вами скрипкой!

HTML

<div id="billdesc">
    <select id="test">
      <option class="non" value="option1">Option1</option>
      <option class="non" value="option2">Option2</option>
      <option class="editable" value="other">Other</option>
    </select>
    <input class="editOption" style="display:none;"></input>
</div>

CSS

body{
    background: blue;
}
#billdesc{
    padding-top: 50px;
}
#test{
    width: 100%;
    height: 30px;
}
option {
    height: 30px;
    line-height: 30px;
}

.editOption{
    width: 90%;
    height: 24px;
    position: relative;
    top: -30px

}

jQuery

var initialText = $('.editable').val();
$('.editOption').val(initialText);

$('#test').change(function(){
var selected = $('option:selected', this).attr('class');
var optionText = $('.editable').text();

if(selected == "editable"){
  $('.editOption').show();


  $('.editOption').keyup(function(){
      var editText = $('.editOption').val();
      $('.editable').val(editText);
      $('.editable').html(editText);
  });

}else{
  $('.editOption').hide();
}
});

Изменить: добавлено несколько простых штрихов в дизайн, чтобы люди могли четко видеть, где заканчивается ввод!

JS Fiddle: http://jsfiddle.net/69wP6/4/

Question 5

Вы действительно не можете. Вам нужно будет иметь как раскрывающийся список, так и текстовое поле, и они должны выбрать или заполнить форму. Без javascript вы можете создать отдельный набор переключателей, где они выбирают раскрывающийся список или ввод текста, но мне это кажется беспорядочным. С помощью некоторого javascript вы можете отключить один или другой в зависимости от того, какой из них они выберут, например, в раскрывающемся списке есть вариант «другой», который запускает текстовое поле.

Question 6

Если опция datalist не соответствует вашим требованиям, обратите внимание на библиотеку Select2 и « Создание динамической опции »

$(".js-example-tags").select2({
  tags: true
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>


<select class="form-control js-example-tags">
  <option selected="selected">orange</option>
  <option>white</option>
  <option>purple</option>
</select>

Развернуть фрагмент

Question 7

Используя одно из вышеперечисленных решений (@mickmackusa), я сделал рабочий прототип в React 16.8+ с помощью хуков.

https://codesandbox.io/s/heuristic-dewdney-0h2y2

Надеюсь, это кому-то поможет.