Форма вибору HTML з можливістю введення спеціального значення

Question 1

Я хотів би мати поле введення, яке користувачі можуть вводити власне текстове значення або вибирати зі спадного меню. Звичайний <select>пропонує лише випадаючі варіанти.

Як я можу <select>прийняти спеціальне значення? Наприклад: Ford?

<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і a 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 Alen Saqe не перемикався для мене у Firefox, тому я подумав, що запропоную простий обхідний спосіб html / javascript, який буде добре функціонувати у формах (щодо подання) до дня, коли тег даталіста буде прийнятий усіма браузерами / пристроями. Щоб отримати докладнішу інформацію та побачити це в дії, перейдіть за посиланням: 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: 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+ за допомогою Hooks.

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

Сподіваюся, це комусь допоможе.