[jQuery] Gmailの宛先みたいなテキスト入力を作りたい
Gmailって便利ですよね～。
ということで、Gmailの宛先入力と同じような
テキスト入力枠を作成してみました。
で、調べてみると全然情報がない！
ただ、テキストの上にラベルを表示したいだけなんです…
あとで調べてみると「select2.full.min.js」という
ライブラリを使うことでもっと簡単にできた。
もっと早く知りたかったけど、作ってしまったので載せておきます。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>ラベル表示</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
.label {
display: inline-block;
background-color: #e0e0e0;
padding: 5px;
margin-right: 5px;
margin-bottom: 5px;
}
.label-close {
cursor: pointer;
font-weight: bold;
color: #555;
margin-left: 5px;
}
.label-container {
position: relative;
display: inline-block;
}
.label-list {
list-style-type: none;
padding: 10px;
border: 1px solid #ccc;
display: flex;
flex-wrap: wrap;
cursor: text;
margin-bottom: 0px;
}
.label-input {
margin-top: 10px;
flex: 1;
border: none;
outline: none;
background: none;
padding: 0;
}
.user-list {
max-height: 200px;
margin-top: 0px;
border: 1px solid #ccc;
border-top: none;
display: none;
overflow-y: scroll;
}
.user-list.visible {
display: block;
}
.user-list .label {
display: block;
margin-left: -40px;
background: none;
cursor: pointer;
}
.user-list .label:hover {
background-color: #eee;
}
</style>
</head>
<body>
<h1>ラベル表示</h1>
<div class="label-container">
<ul id="labelList" class="label-list">
<li><input type="text" id="txt-label" class="label-input"></li>
</ul>
<ul id="labelPopup" class="user-list"></ul>
</div>
<script>
$(function() {
// ulタグにフォーカスを当てる
$("#labelList").on("click", function() {
$("#txt-label").focus();
});
// ドキュメント全体でクリックイベントを監視
$(document).on("click", function(event) {
var target = event.target;
if (!target.closest("#labelList")) {
hideLabelPopup();
}
});
});
var labelList = document.getElementById("labelList");
var input = labelList.getElementsByClassName("label-input")[0];
var labelPopup = document.getElementById("labelPopup");
var pList = [
"John Doe", "Jane Smith", "Michael Johnson", "a", "b", "c", "d", "e", "f", "g",
// ... ここに残りのラベルデータを追加する ...
];
input.addEventListener("focus", function() {
showLabelPopup();
});
input.addEventListener("keydown", function(event) {
if (event.keyCode === 13) { // Enterキーが押された場合
event.preventDefault();
var recipient = input.value.trim();
if (recipient !== "") {
createLabel(recipient);
input.value = "";
}
}
});
function showLabelPopup() {
labelPopup.innerHTML = "";
for (var i = 0; i < pList.length; i++) {
var label = document.createElement("li");
label.className = "label";
label.id = "label" + i;
label.textContent = pList[i];
label.addEventListener("click", function() {
createLabel(this.textContent);
hideLabelPopup();
});
labelPopup.appendChild(label);
}
labelPopup.classList.add("visible");
}
function hideLabelPopup() {
input.value = "";
labelPopup.classList.remove("visible");
}
function createLabel(recipient) {
var label = document.createElement("div");
label.className = "label";
label.textContent = recipient;
var closeButton = document.createElement("span");
closeButton.className = "label-close";
closeButton.textContent = "×";
closeButton.addEventListener("click", function() {
label.remove();
});
label.appendChild(closeButton);
labelList.insertBefore(label, input.parentElement);
}
</script>
</body>
</html>