Formulaire de sélection HTML avec option pour saisir une valeur personnalisée

Question 1

Je voudrais avoir un champ de saisie dans lequel les utilisateurs peuvent entrer une valeur de texte personnalisée ou choisir dans la liste déroulante. Un régulier <select>ne propose que des options déroulantes.

Comment puis-je <select>accepter une valeur personnalisée? Par exemple: 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 a une zone de liste déroulante intégrée. Vous créez un texte inputet un fichier datalist. Ensuite, vous ajoutez un listattribut à la input, avec une valeur idde la datalist.

Mise à jour: depuis mars 2019, tous les principaux navigateurs (y compris maintenant Safari 12.1 et iOS Safari 12.3) prennent datalisten charge le niveau requis pour cette fonctionnalité. Voir caniuse pour une assistance détaillée du navigateur.

Cela ressemble à ceci:

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

Développer l'extrait

Question 3

Le dernier JSFiddle d'Alen Saqe n'a pas basculé pour moi sur Firefox, alors j'ai pensé que je fournirais une solution de contournement simple html / javascript qui fonctionnera bien dans les formulaires (en ce qui concerne la soumission) jusqu'au jour où la balise datalist est acceptée par tous les navigateurs / appareils. Pour plus de détails et le voir en action, rendez-vous sur: http://jsfiddle.net/6nq7w/4/ Remarque: n'autorisez aucun espace entre les frères et sœurs!

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

Solution jQuery!

Démo: http://jsfiddle.net/69wP6/2/

Une autre démo ci-dessous (mise à jour!)

J'avais besoin de quelque chose de similaire dans un cas où j'avais des options fixes et je voulais qu'une autre option soit modifiable! Dans ce cas, j'ai créé une entrée masquée qui chevaucherait l'option de sélection et serait modifiable et utilisait jQuery pour que tout fonctionne de manière transparente.

Je partage le violon avec vous tous!

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();
}
});

Edit: Ajout de quelques touches simples au niveau de la conception, afin que les gens puissent voir clairement où se termine l'entrée!

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

Question 5

Vous ne pouvez pas vraiment. Vous devrez avoir à la fois la liste déroulante et la zone de texte, et leur demander de choisir ou de remplir le formulaire. Sans javascript, vous pouvez créer un ensemble de boutons radio séparés où ils choisissent la liste déroulante ou la saisie de texte, mais cela me semble compliqué. Avec certains javascript, vous pouvez activer ou désactiver l'un ou l'autre en fonction de celui qu'ils choisissent, par exemple, avoir une option «autre» dans la liste déroulante qui déclenche le champ de texte.

Question 6

Si l'option datalist ne répond pas à vos exigences, jetez un œil à la bibliothèque Select2 et à la " création d'options dynamiques "

$(".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>

Développer l'extrait

Question 7

En utilisant l'une des solutions ci-dessus (@mickmackusa), j'ai créé un prototype fonctionnel dans React 16.8+ à l'aide de Hooks.

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

J'espère que cela aide quelqu'un.