<div class="row form-group">
    <div class="col-xs-6">
        <div class="input-group">
            <span class="input-group-addon color-red">特色</span>
            <input type="button" class="btn btn-success" id="addFeatureBtn" value="添加特色" />
        </div>
        <div id="feature" class="input-group" style="margin-left: 68px;margin-top: 10px;">
        </div>
    </div>
</div>

<script>
    $(document).ready(function () {
        {% set featureOld = function('SearchDao::searchFeatureOld', houseId, 1)|json_encode() %}
        {% if featureOld %}
        var data = {{ featureOld }};
        $.each(data, function (i, item) {
            addFeature(item.tag_id, item.name);
        });
        {% endif %}

        var featureArray = [];
        $('#addFeatureBtn').click(function(){
            init_modal_addTag(1, function (id, value) {
                featureArray = [];
                $('input[name="data[houseFeature][]"]').each(function (index, item) {
                    featureArray.push(Number($(item).val()));
                });
                if(featureArray.indexOf(Number(id)) == -1){
                    addFeature(id, value);
                }else{
                    alert('不能重复选择特色');
                }
            });
        });
        $("#feature").on("click",".featureCancel",function(){
            var removeItem = $(this).parent().parent().find("input").val();
            $.grep(featureArray, function(value) {
                return value != removeItem;
            });
            $(this).parent().parent().parent().remove();
        });
    });
    function addFeature(id, value) {
        var houseTag = $("<input>").attr({"type": "hidden", "name": "data[houseTag][]", "value": id});
        var cancel = $("<span>").attr("aria-hidden", "true").addClass("glyphicon glyphicon-remove featureCancel ").css({"top":"3px","margin-left":"10px"});
        var span = $("<span>").attr("style", "margin-right:5px").addClass("label label-info").append(value);
        var h = $("<h4>");
        h.append(span.append(cancel));
        var divCol = $("<div>").append(houseTag).append(h).addClass("col-md-2").attr("style", "margin-bottom:10px");
        $("#feature").append(divCol);
    }
</script>