如何在輸入字段中使用Bootstrap 4制作芯片

Question

我正在嘗試使用下拉菜單創建和輸入字段，下拉列表中的輸入字段的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

Answer 1

 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>

Answer 2

嗨，兄弟使用jQuery的焦點輸出功能來處理。 這樣，當您使用Tab集中精力時，我將可以工作。

$( "element which you want" )
  .focusout(function() {
   //statement which is to be executed.
  })

Answer 3

我建議您使用經過戰斗驗證的解決方案，而不要自己構建！ 看看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)) { 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" />

如何在輸入字段中使用Bootstrap 4制作芯片

問題描述

3 個解決方案

解決方案1
1 已采納 2019-03-26 08:17:57

解決方案2
0 2019-03-21 07:48:09

解決方案3
0 2019-03-26 07:39:34

如何在輸入字段中使用Bootstrap 4制作芯片

問題描述

3 個解決方案

解決方案1 1 已采納 2019-03-26 08:17:57

解決方案2 0 2019-03-21 07:48:09

解決方案3 0 2019-03-26 07:39:34

解決方案1
1 已采納 2019-03-26 08:17:57

解決方案2
0 2019-03-21 07:48:09

解決方案3
0 2019-03-26 07:39:34