jQueryFlexdatalist – Sérgio Dinis Lopes

http://projects.sergiodinislopes.pt/flexdatalist/

Tags : jQuery, flexdatalist

Exemple

Ci-dessous un exemple qui permet de choisir un (ou plusieurs) langages de programmation depuis une liste déroulante.

Si la valeur n’est pas encore dans la liste (p.ex. html) il suffit d’introduire la valeur et d’appuyer sur Enter.

<html lang="en">
   <head
       <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
       <link href="http://projects.sergiodinislopes.pt/flexdatalist/src/jquery.flexdatalist.css?1.8.5" rel="stylesheet" type="text/css">
   </head>

   <body>
      <form class="col-md-4">
         <input 
            id="language" 
            type='text' 
            placeholder='Programming language name' 
            class='flexdatalist' 
            data-min-length='1' 
            multiple='multiple' 
            value="PHP, Cobol, Java, Pascal"
            list='languages' />
      </form>

      <datalist id="languages">
         <option value="PHP">PHP</option>
         <option value="JavaScript">JavaScript</option>
         <option value="Cobol">Cobol</option>
         <option value="C#">C#</option>
         <option value="C">C</option>
         <option value="Java">Java</option>
         <option value="Pascal">Pascal</option>
         <option value="FORTRAN">FORTRAN</option>
         <option value="Lisp">Lisp</option>
         <option value="Swift">Swift</option>
      </datalist>

      <button class="btn btn-default" data-value="C#">Add C#</button>
      <button class="btn btn-default" data-value="Lisp">Add Lisp</button>
      <button class="btn btn-default" data-value="Swift">Add Swift</button>

      <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <script src="http://projects.sergiodinislopes.pt/flexdatalist/src/jquery.flexdatalist.js?1.8.5"></script>

      <script>
         $(document).ready(function() {

            $('.btn').click(function(e) {
               e.preventDefault();

               // Retrieve the current values and append the new one
               var values = $('#language').val().split(','); 
               values.push($(this).data('value')); 

               $('#language').val(values.join(',')); 
            });

            $('#language').change(function(e) {
               alert($('#language').val());
            });

         });
      </script>
   </body>
</html>