tagsinput组件和图标下载网址

àì夳堔傛蜴生んèń 2021-10-15 14:01 325阅读 0赞

详细介绍与相关文件的下载可以参考  http://www.jqueryscript.net/demo/Nice-Tags-Manager-Plugin-with-jQuery-Bootstrap-Bootstrap-Tags-Input/examples/

tagsinput组件效果  
效果图如下：![20190814110840939.png][]

即建输入框中的内容标签化，以逗号或者回车键来区分。

1 下载（http://select2.github.io/select2/）并引入相关的文件，包括jquery和tagsinput的文件  
    <script type="text/javascript" src="../fe-res/js/jquery.min.js"></script>  
    <script src="../resource/tagsinput/bootstrap-tagsinput.js"></script>  
    <link rel="stylesheet" href="../resource/tagsinput/bootstrap-tagsinput.css">

2  后台数据请求，并跳转到jsp

@RequestMapping(value="/reportset/testinput.action")
        public String testinput(ModelMap modelMap,ServletResponse response ){
            return "reportset/inputtest-exp";
        }

3 inputtest-exp.jsp页面

<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>报告集详情</title>
        <link rel="shortcut icon" type="image/x-icon" href="../resource/image/rs_favicon.ico">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    
        <script type="text/javascript" src="../fe-res/js/jquery.min.js"></script>
        <script src="../resource/tagsinput/bootstrap-tagsinput.js"></script>
        <link rel="stylesheet" href="../resource/tagsinput/bootstrap-tagsinput.css">
    
        <link href="../resource/css/bootstrap.css" rel="stylesheet">
        <link href="../resource/css/bootstrap.min.css" rel="stylesheet">
    </head>
    
    <script language="javascript">
        // 弹出当前选择的value
        function show(){
            // 获取选中的对象的值，逗号拼接
            var reslist=$("#e").val(); //多选,获取object
            alert(reslist);
        }
    </script>
    
    <body>
    <div>
        <input type="text" id="e" value="Amsterdam,Washington,Sydney,Beijing,Cairo" data-role="tagsinput" />
        <input type="button" value="show" onclick="show();">
    
    </div>
    </body>

两个图标下载网址：

https://www.iconfont.cn/search/  
https://icons8.cn/icons/

[20190814110840939.png]: /images/20211015/b8e9cb3924724638be689d95bf462334.png