[jQuery] Gmailの宛先みたいなテキスト入力を作りたい

2023年12月5日 16:49

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>

この記事が気に入ったらサポートをしてみませんか？