时间戳

首页 > 解决方案 > 如何在输入字段中使用 bootstrap 4 制作芯片

javascript - 如何在输入字段中使用 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

标签： javascriptjquerybootstrap-4

解决方案

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+"&nbsp;&nbsp; <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>

推荐阅读