3 javascript jquery bootstrap-4
我正在尝试使用下拉列表创建和输入字段，输入字段type=email在下拉列表中我正在从我的数据库中获取邮件 ID 我想要做的是当用户单击任何下拉列表时它被填充到该输入字段但下拉列表不应关闭，因为当用户从下拉列表中关闭时，它是一个多选下拉列表
当用户选择任何下拉菜单时，该选项应该被选中或选中
在该输入字段中，当我们输入多个邮件 ID 时，它可以作为芯片或令牌出现在 gmail 中
<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>在输入字段中，电子邮件应该是 chips
我建议依靠经过实际检验的解决方案，而不是构建自己的解决方案！看一下 jQuery TagEditor：
文档： 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" />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();
}
<!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>