Подтвердить что ты не робот

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

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

Как он может принять пользовательское значение, например ford?

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

Edit: Удаленные мертвые ссылки, решения находятся в ответах.

4b9b3361

ОТВЕТЫ

Ответ 1

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

Имейте в виду, что 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>

Ответ 2

Alen Saqe последний 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>

Ответ 3

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

Ответ 4

jQuery Solution!

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

Еще одно демо ниже (обновлено!)

Мне нужно было что-то подобное в случае, когда у меня были некоторые исправленные опции, и я хотел, чтобы еще один вариант был доступен для редактирования! В этом случае я сделал скрытый ввод, который бы перекрывал опцию select и был бы доступен для редактирования и использовался 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/

Ответ 5

Если опция 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>

Ответ 6

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

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

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