<script>

    $(document).ready(function () {



        $('#product_label').autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: '/obj/ajax/autocomplete/brands/',
                    dataType: "json",
                    data: {
                        term: $("#product_label").val(),//搜索栏里的内容
                        company_id: $('#id_company').val(),//额外参数
                    },
                    success: function (data) {
                        response(data);
                    }
                });
            },
            select: function (event, ui) {
                $("#product_id").val(ui.item.value);
                $("#product_label").val(ui.item.label);
                return false;
            }
        });
        $('.add-product').click(function () {
            var id = $('#product_id').val();
            var label = $('#product_label').val();
            if (id == '') {

                toastr.error("请添加品牌！", "操作错误：",
                    { timeOut: 800, positionClass: "toast-center-center" }
                );
                return;


            } else {
                var e = false;
                $("#sel-product option").each(function () {
                    if ($(this).val() == id) {
                        e = true;
                        return false;
                    }
                });
                if (e) {
                    toastr.error(label + "已在列表中！", "操作错误：",
                        { timeOut: 800, positionClass: "toast-center-center" }
                    );
                    return;
                } else {
                    $('#sel-product').append("<option value='" + id + "'>" + label + "</option>");
                }
            };
        });
        $('.select2_multiple').on('click', 'option', function () {
            $(this).remove();
        });

        $("#btn-save").click(function () {

            var a = [];
            $("#sel-product option").each(function () {
                a.push($(this).val());
            });
            if (a.length > 0) {
                $('#id_products').val(a.join(','));
            };
            $.SubmitForm('#form_1', '{{request.path}}');

        })
    })

</script>



<ol class="breadcrumb">
    <li>用户账号</li>
    <li>品牌绑定</li>
</ol>
<form role="form" method='POST' enctype="multipart/form-data" class="form-horizontal" id="form_1"> {% csrf_token %}
    <div class="row">
        <label class="col-sm-2 control-label" style="text-align: right;margin-top: 5px;">品牌选择</label>
        <div class='col-sm-6'>
            <div class="input-group">
                <input type="text" class="form-control" id="product_label" placeholder="所有品牌">
                <input type="hidden" id="product_id" />
                <span class="input-group-btn"><button type="button" class="btn btn-success add-product">
                        <span class='glyphicon glyphicon-arrow-down'></span></button></span>
            </div>
        </div>
    </div>

    <div class="row">
        <label class="col-sm-2 control-label"></label>
        <div class='col-sm-6'>
            <select class="select2_multiple form-control" id="sel-product" multiple="multiple">
                {% for o in products %}
                <option value='{{o.id}}'>{{o.name}}</option>
                {% endfor %}
            </select>
        </div>
    </div>
    <div class="row" style="margin-top:20px;">
        <label class="col-sm-2 control-label"></label>
        <div class='col-sm-6'>
            <input type="button" class="btn btn-primary" id="btn-save" value="保存" style="width: 60px;" />
        </div>
    </div>
    <input type="hidden" id="id_products" name="brand_ids" readonly />
</form>