web-dev-qa-db-fra.com

plusieurs sélections avec datalist

J'utilise la balise pour créer une liste de suggestions pour ma zone de recherche, mais je ne peux pas sélectionner plusieurs valeurs dans la liste de données. Actuellement, mon HTML est:

<html>

  <form action="search_tags.php" method="GET"/>

  Search: <input type="text" multiple="multiple" name="search" list="tags" autocomplete="off" />

  <datalist id="tags">
    <option value="black">
    <option value="gold">
    <option value="grey">
    <option value="pink">
    <option value="turquoise">
    <option value="red">
    <option value="white">
  </datalist>

</html>

Il proposera des suggestions pour un élément, mais après cela, les suggestions ne suggéreront pas une saisie semi-automatique pour ma deuxième option. Je pensais que la balise "multiple" était tout ce dont j'avais besoin (et ce qui est suggéré en ligne) mais elle ne semble pas avoir l'effet souhaité.

Aucune suggestion?

htmlhtml-datalist
24
nathan lachenmyer

Multiple ne fonctionne actuellement qu'avec le type d'entrée = "email" et uniquement dans Chrome et Opera

regardez cet exemple minimaliste:

<input type="email" list="emails" multiple>
<datalist id="emails">
    <option value="[email protected]">
    <option value="[email protected]">
    <option value="[email protected]">
    <option value="[email protected]">
</datalist>

<input type="text" list="texts" multiple>
<datalist id="texts">
    <option value="black">
    <option value="gold">
    <option value="grey">
    <option value="pink">
    <option value="turquoise">
    <option value="red">
    <option value="white">
</datalist>

( http://jsfiddle.net/iiic/t66boyea/1/ )

La première entrée fonctionnera, la seconde NON. Vous n'appuyez que sur une virgule, et la liste apparaîtra de la même manière qu'au clic dans l'entrée.

17
iiic

Datalist personnalisé pour accepter plusieurs valeurs:

https://jsfiddle.net/bhbwg0rg/1/

Après chaque entrée, appuyez sur , (Virgule) puis Barre d'espace 

<label for="authors">Type authors from favorite to least favorite</label>
<input type="text" list="names-list" id="authors" value="" size="50" name="authors" placeholder="Type author names">
<small>You can type how many you want.</small>
<datalist id="names-list">
  <option value="Albert Camus">
  <option value="Alexandre Dumas">
  <option value="C. S. Lewis">
  <option value="Charles Dickens">
  <option value="Dante Alighieri">
</datalist>
2
Neil

J'ai eu le même problème et les solutions suggérées n'ont tout simplement pas semblé le résoudre. J'ai écrit ce plugin Pure JS (IE11 safe) nComplete pour créer une interaction qui a aidé à gérer plusieurs valeurs.

1
Ryan

Selon cela l'attribut 'multiple' n'est valide qu'avec email et fichier types d'entrée.

0
Blue

Outil jQuery super simple: Flexdatalist

Je voulais quelque chose de plus simple, mais l'attribut "multiple", d'après ce que je comprends, ne fonctionne qu'avec les e-mails et les fichiers parce que les développeurs HTML5 ne veulent pas ouvrir une boîte de vers, mais les développeurs envisagent un changement . Après avoir cherché partout, la seule façon de faire fonctionner cela était aussi d'obtenir ces éléments fantaisistes et utiles "#tagHere X" dans la liste comme sur tant de sites Web. C'était tout ou rien et cela a résolu mon même problème.

Malheureusement, je n'ai pas pu trouver d'instructions complètes sur la façon d'utiliser Flexdatalist . Donc, j'inclus un parcours très complet avec un exemple de travail, pardonnez-le si c'est trop ...

1. Obtenez seulement deux fichiers de Flexdatalist sur GitHub

  • jquery.flexdatalist.min.js
  • jquery.flexdatalist.css (Vous pourriez faire . Min. Js à la place, mais vous voulez probablement Tweak le CSS)

2. Mettez ces deux fichiers au bon endroit:

J'ai utilisé:

[DOMAIN]/js/jquery.flexdatalist.min.js

[DOMAIN]/css/jquery.flexdatalist.css

3. Incluez le fichier CSS

soit:

  • @import "jquery.flexdatalist.css"; dans votre style.css fichier déjà dans [DOMAIN]/css/

ou

  • <link href="css/jquery.flexdatalist.css" rel="stylesheet" type="text/css"> entre vos <head> balises de la page avec le datalist

4. Incluez ces attributs dans votre <input> balise contenant votre datalist

(avec vos autres attributs)

  • <input ... class="flexdatalist form-control" data-min-length="1" data-searchContain="true" multiple="multiple" ... >

5. Incluez trois des instructions JavaScript après votre datalist

<script src=\"http://code.jquery.com/jquery-1.8.3.min.js\"></script>
<script src=\"js/jquery.flexdatalist.min.js\"></script>
<script>
$('.flexdatalist-json').flexdatalist({
     searchContain: false,
     valueProperty: 'iso2',
     minLength: 1,
     focusFirstResult: true,
     selectionRequired: true,
});
</script>

Exemple de travail:

[DOMAIN]/index.html:

<!DOCTYPE html>
<html>
<head>
<title>Flexdatalist Minimalist</title>
<link href="jquery.flexdatalist.css" rel="stylesheet" type="text/css">
</head>
<body>

<input type="text" placeholder="Choose a fruit"

  class="flexdatalist form-control"
  data-min-length="1"
  data-searchContain="true"
  multiple="multiple"

list="fruit" name="my-fruit">
<datalist id="fruit">
  <option value="Apples">Apples</option>
  <option value="Bananas">Bananas</option>
  <option value="Cherries">Cherries</option>
  <option value="Kiwi">Kiwi</option>
  <option value="Pineapple">Pineapple</option>
  <option value="Zucchini">Zucchini</option>
</datalist>

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="jquery.flexdatalist.min.js"></script>
<script>
$('.flexdatalist-json').flexdatalist({
     searchContain: false,
     valueProperty: 'iso2',
     minLength: 1,
     focusFirstResult: true,
     selectionRequired: true,
});
</script>

</body>
</html>

Avec les fichiers deux ici:

[DOMAIN]/js/jquery.flexdatalist.min.js

[DOMAIN]/css/jquery.flexdatalist.css

Une alternative, avec une excellente documentation, est: Awesomeplete

0
Jesse Steele