Menu déroulant/champ de texte en un

Question

Je travaille à la construction d'un nouveau site, et j'ai besoin d'un menu déroulant pour sélectionner la quantité de quelque chose dans mon site. Mais en même temps, j'ai besoin que cette liste déroulante accepte du texte. Ainsi, si le client veut choisir dans la liste déroulante, il peut le faire, et si le client veut entrer le montant par le texte, il le peut aussi. Comme vous pouvez le voir, je veux que cela soit double.

Par exemple, supposons qu'il existe un amount et ses éléments sont (1,2,3) ;

Supposons maintenant que le client souhaite que le montant soit de 5 - c'est son droit - il n'existe pas dans la liste déroulante, le client doit donc maintenant saisir le montant textuellement. Ainsi, pour toute entrée, le client doit soit choisir dans la liste déroulante, soit saisir le montant textuellement.

Après la description de mon problème, et l'exemple simple que je vous ai présenté, voici ma question :

Existe-t-il un code HTML pour faire un menu déroulant et un champ de texte en un seul, en double, non séparé ?

Answer 1

Vous pouvez le faire nativement avec HTML5 <datalist> :

<label>Choose a browser from this list:
<input list="browsers" name="myBrowser" /></label>
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
  <option value="Microsoft Edge">
</datalist>

Answer 2

Option 1

Inclure le script de dhtmlgoodies et l'initialiser comme ceci :

<input type="text" name="myText" value="Norway"
       selectBoxOptions="Canada;Denmark;Finland;Germany;Mexico"> 

createEditableSelect(document.forms[0].myText);

Option 2

Voici une solution personnalisée qui combine un <select> et <input> les stylise et les fait alterner via JavaScript.

<div style="position:relative;width:200px;height:25px;border:0;padding:0;margin:0;">
  <select style="position:absolute;top:0px;left:0px;width:200px; height:25px;line-height:20px;margin:0;padding:0;"
          onchange="document.getElementById('displayValue').value=this.options[this.selectedIndex].text; document.getElementById('idValue').value=this.options[this.selectedIndex].value;">
    <option></option>
    <option value="one">one</option>
    <option value="two">two</option>
    <option value="three">three</option>
  </select>
  <input type="text" name="displayValue" id="displayValue" 
         placeholder="add/select a value" onfocus="this.select()"
         style="position:absolute;top:0px;left:0px;width:183px;width:180px\9;#width:180px;height:23px; height:21px\9;#height:18px;border:1px solid #556;"  >
  <input name="idValue" id="idValue" type="hidden">
</div>

Answer 3

La solution moderne est un champ de saisie de type "recherche" !

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search https://www.w3schools.com/tags/tag_datalist.asp

Quelque part dans votre HTML, vous définissez une liste de données pour une référence ultérieure :

<datalist id="mylist">
   <option value="Option 1">
   <option value="Option 2">
   <option value="Option 3">
</datalist>

Ensuite, vous pouvez définir votre entrée de recherche comme ceci :

<input type="search" list="mylist">

Voilà. Très agréable et facile.

Answer 4

Vous pouvez utiliser le <datalist> au lieu de la balise <select> étiquette.

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

Answer 5

J'ai trouvé cette question et cette discussion très utiles et je voulais montrer la solution que j'ai trouvée. Elle est basée sur la réponse donnée par @DevangRathod, mais j'ai utilisé jQuery et y ai apporté quelques modifications. Je voulais donc montrer un exemple entièrement commenté pour aider toute personne travaillant sur quelque chose de similaire. À l'origine, j'utilisais l'élément HTML5 data-list, mais je n'étais pas satisfait de cette solution car elle supprime les options de la liste déroulante qui ne correspondent pas au texte saisi dans la case. Dans mon application, je voulais que la liste complète soit toujours disponible.

Démonstration entièrement fonctionnelle ici : https://jsfiddle.net/abru77mm/

HTML :

<!-- 
Most style elements I left to the CSS file, but some are here.
Reason being that I am actually calculating my width dynamically
in my application so when I dynamically formulate this HTML, I
want the width and all the factors (such as padding and border
width and margin) that go into determining the proper widths to
be controlled by one piece of code, so those pieces are done in
the in-line style.  Otherwise I leave the styling to the CSS file.
-->
<div class="data-list-input" style="width:190px;">
  <select class="data-list-input" style="width:190px;">
    <option value="">&lt;Free Form Text&gt;</option>
    <option value="Male">Male</option>
    <option value="Female">Female</option>
    <!-- Note that though the select/option allows for a different
    display and internal value, there is no such distinction in the
    text box, so for all the options (except the "none" option) the
    value and content of the option should be identical. -->
  </select>
  <input class="data-list-input" style="width:160px;padding:4px 6px;border-width:1px;margin:0;" type="text" name="sex" required="required" value="">
</div>

JS :

jQuery(function() {
  //keep the focus on the input box so that the highlighting
  //I'm using doesn't give away the hidden select box to the user
  $('select.data-list-input').focus(function() {
    $(this).siblings('input.data-list-input').focus();
  });
  //when selecting from the select box, put the value in the input box
  $('select.data-list-input').change(function() {
    $(this).siblings('input.data-list-input').val($(this).val());
  });
  //When editing the input box, reset the select box setting to "free
  //form input". This is important to do so that you can reselect the
  //option you had selected if you want to.
  $('input.data-list-input').change(function() {
    $(this).siblings('select.data-list-input').val('');
  });
});

CSS :

div.data-list-input
{
    position: relative;
    height: 20px;
    display: inline-flex;
    padding: 5px 0 5px 0;
}
select.data-list-input
{
    position: absolute;
    top: 5px;
    left: 0px;
    height: 20px;
}
input.data-list-input
{
    position: absolute;
    top: 0px;
    left: 0px;
    height: 20px;
}

Tout commentaire visant à améliorer ma mise en œuvre est le bienvenu. J'espère que quelqu'un trouvera cela utile.