J'essaie de créer un champ de saisie avec un menu déroulant, le champ de saisie est de type = email dans le menu déroulant Je reçois des identifiants de messagerie de ma base de données ce que j'essaie de faire lorsque l'utilisateur clique sur une liste déroulante, elle est remplie dans ce champ de saisie, mais la liste déroulante ne doit pas se fermer car il s'agit d'une liste déroulante à sélection multiple chaque fois que l'utilisateur se concentre hors de la liste déroulante, il se ferme
Lorsque l'utilisateur sélectionne n'importe quelle liste déroulante cette option devrait être sélectionnée ou cochée
et à l'intérieur de ce champ de saisie, elle peut venir sous forme de puce ou de jeton comme dans gmail lorsque nous entrons plus d'un identifiant de messagerie
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<div class="input-group mt-3 mb-3">
<input type="email" class="form-control" placeholder="mail id">
<div class="input-group-prepend">
<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown">
Email id
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">abc@gmail.com</a>
<a class="dropdown-item" href="#">egf@gmail.com</a>
<a class="dropdown-item" href="#">123@gmail.com</a>
</div>
</div>
</div>
et dans le champ de saisie, l'e-mail doit être sous forme de puces
3 Réponses :
Hey bro, utilise la fonction jquery focus out pour gérer. pour que je travaille lorsque vous vous concentrez sur tab.
$( "element which you want" )
.focusout(function() {
//statement which is to be executed.
})
j'essaie de faire la même chose que nous avons dans gmail composer un message
@dheerajkumar utilise la fonction focus out qu'il exécutera lorsque vous appuierez sur la touche de tabulation.
Je suis confronté à un problème lors de la fabrication de la puce avec JS :(
@dheerajkumar nous donne le code html que tu as travaillé pour que nous puissions t'aider à réaliser ce que tu veux.
j'ai téléchargé le code HTML, ce champ de saisie je veux faire chatter quel que soit l'email que je saisis, puis je veux le montrer sous forme de puces
Je vous suggère de vous fier à une solution testée au combat plutôt que de créer la vôtre! Jetez un œil à jQuery TagEditor:
Documentation: https: // goodies. pixabay.com/jquery/tag-editor/demo.html
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/caret/1.3.4/jquery.caret.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tag-editor/1.0.20/jquery.tag-editor.js"></script> <input id="email-tags" />
@import url("https://cdnjs.cloudflare.com/ajax/libs/tag-editor/1.0.20/jquery.tag-editor.css");
const isEmail = input => /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/.test(input);
$('#email-tags').tagEditor({
placeholder: 'Enter tags ...',
beforeTagSave: (field, editor, tags, tag, val) => {
// make sure it is a formally valid email
if (!isEmail(val)) {
console.log(`"${val}" is not a valid email`);
return false;
}
}
});
monsieur j'ai édité mon message, veuillez vérifier ce que je recherche
juste vérifié, le code fonctionne très bien ... J'ai ajouté un journal pour montrer que la valeur saisie n'est pas un e-mail valide. Merci pour votre commentaire!
Merci !! Pouvez-vous fournir le même code dans Angularjs sans matériau angulaire?
Merci! Bibliothèque très utile.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery UI Autocomplete - Default functionality</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"> <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <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> </head> <body> <div class="row"> <div class="col-md-3"> <div id="email-html"></div> <input type="hidden" name="emails" id="emails"/> </div> <div class="col-md-3"> <div class="ui-widget"> <input id="tags"> </div> </div> </div> </body> </html>
var selected = [];
var availableTags = [
"abc@gmail.com",
"abc1@gmail.com",
"abc2@gmail.com",
"abc3@gmail.com",
"abc4@gmail.com"
];
$( function() {
$("#tags").autocomplete({
source: availableTags,
select: function( event, ui){
var value = ui.item.value;
selected.push(value);
refreshDiv();
var i = availableTags.indexOf(value);
availableTags.splice(i, 1);
event.preventDefault();
$("#tags").focusout();
$("#tags").val('');
}
});
});
function refreshDiv(){
$("#emails").val(selected.join(','));
var email_html = selected.map(function(f, i){
return "<span class='btn btn-info btn-sm' style='margin: 3px;'>"+f+" <span onclick=\"removeEmail('"+f+"')\" style='color:red'>x</span></span>";
});
$("#email-html").html(email_html);
}
function removeEmail(email){
availableTags.push(email);
var i = selected.indexOf(email);
selected.splice(i, 1);
refreshDiv();
}
yuppp, comme ça, mais pourquoi puis-je en faire une puce comme elle l'était dans votre solution précédente, et si je peux le faire sans aucun plugin et aussi ce champ de sélection obtient également les valeurs renseignées lorsque je clique sur n'importe quelle liste déroulante
Ça marche?
hé pourquoi créer un autre div pour afficher les données, ce que j'essaie de faire est de supprimer ce plugin bootstrap-select , puis d'avoir un champ de saisie avec une liste déroulante par laquelle lorsque je clique sur n'importe quelle liste déroulante, il est sélectionné et sa valeur stockée dans ce champ d'entrée
Je ne vous comprends pas. voulez-vous la fonctionnalité de sélection de bootstrap exacte sans l'utiliser?
ouais quelque chose comme une liste déroulante avec sélection multiple et lorsque je clique sur n'importe quelle liste déroulante, elle est remplie dans ce champ de saisie comme votre première solution
hé pouvez-vous s'il vous plaît m'aider stackoverflow.com/questions/55846400/...
Jetez un œil: embed.plnkr.co/plunk/hVDNb4
@MebinJoe qui se passe en cliquant sur le bouton je veux le faire sur l'onglet appuyez ou entrez de mon gmail
Il existe des centaines de plugins qui font exactement ce que vous demandez - bien que vous puissiez les trouver plus facilement si vous utilisez le terme plus courant:
tokenise@ Freedomn-m Je n'utilise pas angular, je peux le faire en HTML brut en utilisant java-script et bootstrap?
@ Freedomn-m
tokenizeinputsélectionne des valeurs dans une liste prédéfinie ce qui n'est pas le cas iciVous ne savez pas ce que vous entendez par
tokenizeinput, mais le processus de conversion du texte d'entrée en ce que vous appelez une "puce" est également appelé "tokenise" / "tokenize". Vous aidera à rechercher une solution sur Google. En l'état, votre question est trop large. Vous pourriez peut-être ajouter le code javascript que vous avez tenté.@ Freedomn-m s'il vous plaît ne dites pas que ma question est trop large, je n'ai aucune connaissance à ce sujet, c'est pourquoi j'ai posé la question
Parlez-vous de ceci: aehlke.github.io/tag-it/examples.html < / a>
@MayankPandeyz yup comme ça seulement mais mon formulaire est différent s'il vous plaît vérifier la modification que j'ai faite, cela vous permettra de savoir ce que j'essaye de faire
Désolé, je n'ai pas vu votre modification. laissez-moi mettre à jour ma réponse. @dheerajkumar
@Prabusamvel yupp, j'ai un champ de saisie ainsi qu'une liste déroulante lorsque l'utilisateur sélectionne des options dans la liste déroulante, puis il sera renseigné dans le champ de saisie, ou il n'est pas nécessaire de valider l'e-mail, car je reçois tous les identifiants de messagerie de la base de données dans menu déroulant