jquery 一个标签选择的实现 请教请教

Question

现在要做的就是最多可以选择三个标签，选中的标签要在“选择标签”那一栏里面显示。

标签都是span元素，“选择标签”那一栏是个input。

这个效果该怎么实现呢？请教jquery高手 ，谢谢 ~

Answer 1

假定你这些标签的数据都是从后端渲染的，那么就会有相应的id和值，假设页面渲染出来是这个效果

<div class="container">
    <div class="input-group input-group-sm">
        <input type="text" class="form-control" id="input" readonly>
        <span class="input-group-addon" id="certainBtn">确定</span>
    </div>
    <div class="btn-group btn-group-sm mt" id="labels">
        <span type="button" class="btn btn-default" data-id="1" data-value="公司运营">公司运营</span>
        <span type="button" class="btn btn-default" data-id="2" data-value="互联网营销">互联网营销</span>
        <span type="button" class="btn btn-default" data-id="3" data-value="组织变革">组织变革</span>
        <span type="button" class="btn btn-default" data-id="4" data-value="招聘/激励">招聘/激励</span>
        <span type="button" class="btn btn-default" data-id="5" data-value="品牌公关">品牌公关</span>
        <span type="button" class="btn btn-default" data-id="6" data-value="财务/法务">财务/法务</span>
    </div>
</div>

(function ($) {  

    var $labels = $('#labels'); //标签栏
    var $input = $('#input'); //输入框
    var $certainBtn=$('#certainBtn'); //确定按钮

    var data = {};//已选择的数据
    var max = 3;  //最多选择数目
    var activeClass = 'btn-primary'; //选中的active样式

    $labels.on('click', 'span', function () {
        var $this = $(this);
        var id = $this.data('id');
        var value = $this.data('value');
        var isSelected = $this.hasClass(activeClass);//是否被选中

        //超过数目限制则不做处理
        if (!isSelected && Object.keys(data).length >= max) {
            return;
        }

        isSelected ? delete data[id] : data[id] = value;
        $this.toggleClass(activeClass);
        renderInput();

    });

    $certainBtn.click(function () {
        console.log(data);
    });


    function renderInput() {
        var values = [];
        for (var id in data) {
            values.push(data[id]);
        }
        $input.val(values.toString());

        //with underscore
        //$input.val(_.values(data).toString());
    }
})(jQuery);

采用组件化的思想重新写一个

(function($){
    var labelChoose = {
        el: {
            $labels: $('#labels'),
            $input: $('#input'),
            $certainBtn: $('#certainBtn')
        },
        max: 3,
        data: {},
        activeClass: 'btn-primary',
        init: function (defaultData) {
            var self = this;
            this.renderInit(defaultData); //初始化
            this.el.$labels.on('click', 'span', function (e) {
                self.labelsClick(e);
            });
            this.el.$certainBtn.on('click', function (e) {
                self.certainClick(e);
            });
        },
        labelsClick: function (e) {
            var $this = $(e.currentTarget);
            var id = $this.data('id');
            var value = $this.data('value');
            var isSelected = $this.hasClass(this.activeClass);//是否被选中

            //超过数目限制则不做处理
            if (!isSelected && Object.keys(this.data).length >= this.max) {
                return;
            }

            isSelected ? delete this.data[id] : this.data[id] = value;
            $this.toggleClass(this.activeClass);
            this.renderInput();
        },
        renderLabels: function () {
            var self = this;
            this.el.$labels.find('span').each(function () {
                var $this = $(this);
                var id = $this.data('id');

                for (var idz in self.data) {
                    if (idz === id.toString()) {
                        $this.addClass(self.activeClass);
                    }
                }
            });
        },
        renderInput: function () {
            var values = [];
            for (var id in this.data) {
                values.push(this.data[id]);
            }
            //with underscore
            //this.el.$input.val(_.values(this.data).toString());
            this.el.$input.val(values.toString());
        },
        certainClick: function (e) {
            console.log(this.data);
        },
        renderInit: function (defaultData) {
            this.data = defaultData || {};
            this.renderLabels();
            this.renderInput();
        }
    };

    labelChoose.init({
        '1': '公司运营',
        '2': '互联网营销'
    });
})(jQuery);

由于涉及到数据操作和this绑定，和underscore结合起来使用会比较好点，以上代码仅供参考！

Answer 2

大概要做这么几件事：

1.定义显示被选中的标签的函数
2.在每个标签上设置点击事件

在每次点击标签的时候，把当前的this标签传到1的函数里，append到input的value里。

Answer 3

这种插件自己写的话会很麻烦 建议直接用插件去实现
给你说两个吧 都是我经常用到的：
select2 和 flatui(前端UI框架)

点进去看看文档稍有JQ基础都可以做出你想要的效果。

我再简单描述一下自己写代码要怎么实现：
input框里肯定是要有CSS和JS来控制的
span标签添加点击事件，点击后加个display:none的style（并不是删除 方便在input中点击移除后重新展现）。
假定span有个id叫sp1 input的id叫show，大概的思路是这样的：

$('#sp1').click(function(){
    $(this).css('display','none');
    //获取span中的值复制给input
    $('#show').val($(this).html());
})

span中的值赋值给input久做好了，但是如果在input点击后取消显示就有一些复杂了，你需要定制一些样式，最起码input中的值可以点击并且触发事件。我就说这么多，起到抛砖引玉的作用。