標籤輸入外掛

池魚1024發表於2020-12-12

bootstrap-tagsinput

在這裡插入圖片描述

star: 3k
github: https://github.com/bootstrap-tagsinput/bootstrap-tagsinput
例項: http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/

  • 需要引入 jquery、bootstrap
  • bootstrap 版本為3.3.5 ，不支援4.x版本

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="bootstrap-tagsinput.css">
    <script src="bootstrap-tagsinput.min.js"></script>
    <title>Document</title>
</head>
<body>
    <input type="text" value="Amsterdam,Washington,Sydney,Beijing,Cairo" data-role="tagsinput" >
</body>
</html>

jQuery-Tags-Input

在這裡插入圖片描述

star: 2.3k
github: https://github.com/xoxco/jQuery-Tags-Input
例項: http://xoxco.com/projects/code/tagsinput/example.html

示例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="./src/jquery.tagsinput.css" />
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script type="text/javascript" src="./src/jquery.tagsinput.js"></script>
	<title>Document</title>
</head>
<body>
	<input name="tags" id="tags" />
	<script>
		$('#tags').tagsInput();
	</script>
</body>
</html>

相關文章