Menu
I am trying to make and input field with drop-down,the input field is of type=email in the drop-down i am getting mail ids from my database what i am trying to do is when user clicks on any drop-down it gets populated into that input field but drop-down should not close becauseit is a multi-select dropdown when ever user focus-out from the drop-down it gets closed
When user selects any drop-down that option should get selected or checked
and inside that input field it can come as chip or token as how it comes in gmail when we enter more then one mail ids
<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="#">[email protected]</a>
<a class="dropdown-item" href="#">[email protected]</a>
<a class="dropdown-item" href="#">[email protected]</a>
</div>
</div>
</div>and in input field email should come as chips
var selected = [];
var availableTags = [
"[email protected]",
"[email protected]",
"[email protected]",
"[email protected]",
"[email protected]"
];
$( 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();
}
<!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>
170
I'd suggest to rely on a battle tested solution rather than building your own! Have a look at jQuery TagEditor:
Documentation: https://goodies.pixabay.com/jquery/tag-editor/demo.html
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;
}
}
});@import url("https://cdnjs.cloudflare.com/ajax/libs/tag-editor/1.0.20/jquery.tag-editor.css");<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" />If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
