(代码记录)bootstrap tagsinput 基本功能DEMO

最新推荐文章于 2022-02-14 13:19:52 发布

ISaiSai

最新推荐文章于 2022-02-14 13:19:52 发布

阅读量7.6k

点赞数

分类专栏： javascript

javascript 专栏收录该内容

155 篇文章 0 订阅

订阅专栏

基本功能包括
1.初始化（集成了typeahead 及 bundle ）
2.初始化值 tagsinput(‘add’, {xxxx})
3.获取值 tagsinput(“items”)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="../base/bootstrap.css">
    <link rel="stylesheet" href="../base/bootstrap-tagsinput.css">
    <link rel="stylesheet" href="../base/tt.css">
    <script src="../base/jquery.js"></script>
    <script src="../base/bootstrap.min.js"></script>
    <script src="../base/bootstrap-tagsinput.js"></script>
    <script src="../base/typeahead.bundle.js"></script>

</head>
<body>

<input type="button" id="getValue" value="获取值">
<input id="J_taginput" class="form-control" style="min-width: 500px;">

<script>
    $(function () {

        $("#getValue").click(function () {
            var resultValue = $("#J_taginput").tagsinput("items")
        })


        var placeSource = new Bloodhound({
            // 不了解 都是用默认值
            datumTokenizer: Bloodhound.tokenizers.whitespace,
            // 不了解 都是用默认值
            queryTokenizer: Bloodhound.tokenizers.whitespace,
            remote: {
                // 数据源
                //  url: 'mock.json?name=%QUERY',
                url: 'mdddata.json?name=%QUERY',
                //查询占位符
                wildcard: '%QUERY',
                // 返回结果转化
                transform: function (r) {
                    return r.result;
                }
            }
        });

        $("#J_taginput").tagsinput(
                {
                    // 值的字段
                    itemValue: "idTree",
                    // 可以是string 也可以是function  展示的字段
                    itemText: 'nameTree',
                    // 推荐下拉
                    typeaheadjs: {
                        // name 不知道有什么用
                        name: 'place',
                        // 下拉的展示
                        display: 'nameTree',
                        // 数据源
                        source: placeSource
                    }
                }
        );
        $("#J_taginput").tagsinput('add', {"idTree": "123", "nameTree": "测试"});


    })
</script>
</body>
</html>

ISaiSai

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
(代码记录)bootstrap tagsinput 基本功能DEMO

基本功能包括 1.初始化（集成了typeahead 及 bundle ） 2.初始化值 tagsinput(‘add’, {xxxx}) 3.获取值 tagsinput(“items”)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <link rel="st
复制链接

扫一扫