web-dev-qa-db-fra.com

Menu déroulant / Champ de texte en un

Je travaille sur la construction d'un nouveau site et j'ai besoin d'un menu déroulant pour sélectionner la quantité de contenu dans mon site. Mais en même temps, j'ai besoin de cette liste déroulante pour accepter le texte. Donc, si le client veut choisir dans la liste déroulante, il peut le faire, même s'il souhaite saisir le montant par texte, il le peut également. Comme vous pouvez le voir, je veux que ce soit double.

Par exemple: supposons qu'il y ait un menu déroulant amount et que ses éléments sont (1,2,3);

Supposons maintenant que le client ait besoin que le montant soit égal à 5 ​​- c'est son droit - il n'existe pas dans la liste déroulante. Le client doit donc saisir le montant textuellement. Donc, pour toute entrée, le client doit choisir dans la liste déroulante ou entrer 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 créer un menu déroulant et un champ de texte en un, en double, non séparés?

htmlhtml-selecthtml-input
53
khalid jarrah

Option 1

Incluez le script de dhtmlgoodies et initialisez 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 élément <select> et un élément <input>, les stylise et les bascule en arrière 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>
36
Devang Rathod

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>_
89
onaclov2000

J'ai trouvé cette question et cette discussion très utiles et je voulais montrer la solution à laquelle j'ai abouti. Il est basé 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 autre personne travaillant sur un sujet similaire. J'avais initialement utilisé l'élément de liste de données HTML5, 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 zone. Dans ma candidature, je voulais que la liste complète soit toujours disponible.

Démo 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;
}

Tous les commentaires d'amélioration sur ma mise en œuvre sont les bienvenus. J'espère que quelqu'un trouve cela utile.

5
Daniel Skarbek

J'aime l'entrée jQuery Token. En fait, préférez l’UI par rapport aux autres options mentionnées ci-dessus.

http://loopj.com/jquery-tokeninput/

Voir aussi: http://railscasts.com/episodes/258-token-fields pour une explication

1
Matthias

Inspiré par le violon js de @ajdeguzman (made my day), voici mon dérivé noeud/React:

 <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",lineHeight:"20px",
                    margin:0,padding:0}} onChange={this.onMenuSelect}>
            <option></option>
            <option value="starttime">Filter by Start Time</option>
            <option value="user"     >Filter by User</option>
            <option value="buildid"  >Filter by Build Id</option>
            <option value="invoker"  >Filter by Invoker</option>
    </select>
    <input name="displayValue" id="displayValue" 
           style={{position:"absolute",top:"2px",left:"3px",width:"180px",
                   height:"21px",border:"1px solid #A9A9A9"}}
           onfocus={this.select} type="text" onChange={this.onIdFilterChange}
           onMouseDown={this.onMouseDown} onMouseUp={this.onMouseUp} 
           placeholder="Filter by Build ID"/>
 </div>

Ressemble à ça:

enter image description here

1
Gunnar Forsgren - Mobimation

J'aimerais ajouter une solution jQuery à base d'auto-complétion qui fait le travail.

Étape 1: Rendre la liste à hauteur fixe et à faire défiler

Obtenez le code auprès de https://jqueryui.com/autocomplete/ Exemple "Scrollable", définition de la hauteur maximale dans la liste des résultats afin qu'elle se comporte comme une zone de sélection.

Étape 2: Ouvrez la liste sur le focus:

Affiche la liste de saisie semi-automatique de jquery ui sur l'événement de focus

Étape 3: définissez le nombre minimum de caractères sur 0 pour qu'il s'ouvre, quel que soit le nombre de caractères présents dans l'entrée

Résultat final:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Autocomplete - Scrollable results</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  .ui-autocomplete {
    max-height: 100px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
  }
  /* IE 6 doesn't support max-height
   * we use height instead, but this forces the menu to always be this tall
   */
  * html .ui-autocomplete {
    height: 100px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "LISP",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
//      source: availableTags, // uncomment this and comment the following to have normal autocomplete behavior
      source: function (request, response) {
          response( availableTags);
      },
      minLength: 0
    }).focus(function(){
//        $(this).data("uiAutocomplete").search($(this).val()); // uncomment this and comment the following to have autocomplete behavior when opening
        $(this).data("uiAutocomplete").search('');
    });
  } );
  </script>
</head>
<body>

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>


</body>
</html>

Vérifiez jsfiddle ici:

https://jsfiddle.net/bao7fhm3/1/

0
Alexandru Trandafir Catalin