- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试使用下拉列表创建和输入字段,下拉列表中的输入字段为 type=email
我正在从数据库中获取邮件 ID,我正在尝试执行此操作是当用户单击任何下拉菜单时,它会填充到该输入字段中,但下拉菜单不应关闭,因为它是一个多选下拉菜单,当用户从下拉菜单中聚焦时,它会关闭
当用户选择任何下拉菜单时,应选择或选中该选项
在该输入字段中,当我们输入多个邮件 ID 时,它可以作为芯片或 token 出现在 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
形式出现
最佳答案
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>
关于javascript - 如何在输入字段中使用 bootstrap 4 制作芯片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55275193/
您好,在我的 android 项目中,我计划使用 TwinLinx Mymax NFC 芯片来启用任何手机的 nfc。但我不知道手机如何使用蓝牙与 nfc 芯片通信。我认为他们会为此提供一些 sdk
我想在我的应用程序中实现一个带有芯片的自动完成编辑文本,我想以一种在这里完成的方式来完成它:material design chips .首先,我想问一下是否有某种小部件(可能是新支持库的一部分)或我
我想知道不同种类的复位以及芯片中的定义。最好冷,暖,系统,应用,开机复位。 同样,对于它们每个的简单示例也受到高度赞赏。 谢谢。 最佳答案 不知道您到底想了解什么。重置可以并且可以以多种不同的方式和方
是否可以在按下按钮后开始从 nfc 芯片读取数据。按下按钮后,应该会出现一条消息,例如“请将您的 nfc 芯片靠近设备……”。我只看到教程,它展示了如何在设备上拿着 nfc 芯片时启动应用程序 (on
我看到一些问题在垂直堆叠 md-chips 的同时保持输入顶部,但我想将 md-chips 堆叠在输入行下方,就像它在 google 和 pinterest 中的情况一样 我希望输入字段位于顶部,筹码
我的应用程序中有一个表单,我在其中使用了来自 Primafaces 的以下代码: ...other inputs... Tags 我能够正确显示 Chip 元素,但我想设置其宽度为 100% 和高度
我正在使用 primefaces 并使用元素“chips”引入多封电子邮件,我验证了它们的格式,如果验证是,我试图将“气泡”的样式更改为 ui-state-error错了 我的筹码:
您好,我是android新手,正在学习使用material chips。我创建了一个测试项目并添加了以下内容 我添加到我的 gradle 文件中 implementation 'com.android
我尝试在 Apple M1 chip 上运行 android 模拟器MacBook 但它不起作用,并且 AVD 管理器显示错误消息:无法启动 AVD .这个问题的根源似乎是 M1 芯片不支持虚拟化,而
我想使用material-ui chips在我的 react 应用程序中。问题是我想通过拖放来移动芯片。 material ui 不支持此功能。是否有解决方法/扩展来使芯片可拖动? 查看完整示例:h
我正在使用materializecss编写一个表单字段,其中包含带有自动完成选项的mat-chips。这个想法是每当添加新芯片时就发出 PATCH 请求。以下是我当前使用的代码片段: $('#tag-
我正在使用materializecss编写一个表单字段,其中包含带有自动完成选项的mat-chips。这个想法是每当添加新芯片时就发出 PATCH 请求。以下是我当前使用的代码片段: $('#tag-
继续:EMV Reading PAN Code 我正在使用 C 语言,所以我没有 Java 工具和自动解析 APDU 命令响应的所有函数。我想读取所有类型的智能卡。我必须解析 GET PROCESSI
我正在寻找与 NDEF 兼容并为大多数运行 Android 4.x 的设备所支持的 NFC 芯片,不知何故我只能找到很少的相关信息。谁能说出制造商/芯片型号或提供一些有用的链接? 最佳答案 参见 ht
我不知疲倦地尝试在表格 View 单元格中创建一个“芯片”布局,其中单元格的高度会扩展以填充内容,但没有成功。 我的研究让我找到了这个图书馆 https://github.com/zoonooz/ZF
我已经开始在我的应用程序中使用 Angular Material。我正在使用 md-chips 控件,我想以从右到左的方向显示它。(右侧的筹码和左侧的占位符)我查看了 angular-material
我在 android 上遇到芯片组件问题。我尝试实现这样的芯片: 但是当我启动我的应用程序时出现此错误: android.view.InflateException: Binary XML
我有一个 CRUD,我想更改 inputTexArea: 新的 Primefaces chips 组件: 实体类摘录: @Lob @Size(max = 2147483647) @Column(n
我有一堆由 ngFor 循环生成的 ionic 芯片。我使用 tagDefaultColor 添加了选择所有 ionic 芯片功能多变的。现在,当我想选择单个 ionic 芯片时,它会选择所有这些。
我已经在网上查看过,讨论/示例似乎是针对传统软件开发的。由于Verilog和VHDL(用于芯片设计,例如FPGA和ASIC)与软件开发C和C++类似,因此似乎很有意义。但是,它们在本质上是并行的并且需
我是一名优秀的程序员,十分优秀!