tool/application/admin/view/warehousing_detail/add.html

<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" AUTOCOMPLETE="OFF" action="">
    <div style="margin-left: 550px;">
        <button type="submit" class="btn btn-success btn-embossed disabled">新增配方</button>
    </div>
    <div style="height: 5px;">

    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Product_name')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-product_name"  class="form-control" name="row[product_name]" type="text">
            <ul id="dynamicUl">

            </ul>

        </div>
        <div class="box2" style="display: none;">
            <ul id="data">
               {volist name="backData" id="vo"}
                    <li>{$vo}</li>
                {/volist}
            </ul>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Product_number')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-product_number" class="form-control" name="row[product_number]" type="text" >
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">配方名称:</label>
        <div class="col-xs-12 col-sm-8" id="formula">

        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Order_number')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-order_number" class="form-control" name="row[order_number]" type="text" placeholder="如无可不填">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Bach_number')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-bach_number" class="form-control" name="row[bach_number]" type="text" disabled>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Color')}:</label>
        <div class="col-xs-12 col-sm-8" id="color">
        </div>
    </div>
    <!--<div class="form-group">-->
        <!--<label class="control-label col-xs-12 col-sm-2">{:__('Is_scrap')}:</label>-->
        <!--<div class="col-xs-12 col-sm-8">-->
                        <!---->
            <!--<select  id="c-is_scrap" data-rule="required" class="form-control selectpicker" name="row[is_scrap]">-->
                <!--{foreach name="isScrapList" item="vo"}-->
                    <!--<option value="{$key}" {in name="key" value="0"}selected{/in}>{$vo}</option>-->
                <!--{/foreach}-->
            <!--</select>-->

        <!--</div>-->
    <!--</div>-->
    <!--<div class="form-group">-->
        <!--<label class="control-label col-xs-12 col-sm-2">{:__('Status')}:</label>-->
        <!--<div class="col-xs-12 col-sm-8">-->
            <!---->
            <!--<div class="radio">-->
            <!--{foreach name="statusList" item="vo"}-->
            <!--<label for="row[status]-{$key}"><input id="row[status]-{$key}" name="row[status]" type="radio" value="{$key}" {in name="key" value="0"}checked{/in} /> {$vo}</label> -->
            <!--{/foreach}-->
            <!--</div>-->

        <!--</div>-->
    <!--</div>-->
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">重量(kg)</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-weight" data-rule="required" class="form-control" name="row[weight]" type="text">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Position')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-position" class="form-control" name="row[position]" type="text" >
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('First_quality')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-first_quality" data-rule="required" class="form-control" name="row[first_quality]" type="text" value="10" disabled>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Create')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-create" data-rule="required" class="form-control datetimepicker" data-date-format="YYYY-MM-DD HH:mm:ss" data-use-current="true" name="row[create]" type="text" value="{:date('Y-m-d H:i:s')}" disabled>
        </div>
    </div>
    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" style="font-size: 20px;" class="btn btn-success btn-embossed disabled">{:__('OK')}</button>
            <!--<button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>-->
        </div>
    </div>
</form>
<!--<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>-->
<script src="__CDN__/assets/js/jquery.min.js"></script>
<script>
    $('#c-product_name').focus();
    $('#c-product_number').blur(function () {
        var product_number = $(this).val();
        if(product_number == ''){
            return false;
        }

        $.ajax({
            type:"POST",
            url:"{:url('admin/WarehousingDetail/getColor')}",
            data:{data:product_number},
            dataType:"json",
            success:function (data) {
                if (data.status == 1){
                    var str = '<div class="radio">';
                    $.each(data.formula,function (key,value) {
                        if (key == 0){
                            str += '<label><input type="radio" name="row[formula]" value="'+value+'" checked/> '+value+'</label>';
                        }else{
                            str += '<label><input type="radio" name="row[formula]" value="'+value+'" /> '+value+'</label>';
                        }

                    })
                    str += '</div>';
                    $('#formula').empty();
                    $('#formula').append(str);
                    var html='<div class="radio">';
                    $.each(data.data,function (k,v) {
                        html  += '<label><input type="radio" name="row[cid]" value="'+v.id+'" /> '+v.color+'</label>';
                    })
                    html+= '</div>';
                    $('#color').empty();
                    $('#color').append(html);
                    $('#c-order_number').focus();
                }else{
                    $('#c-product_name').val('');
                    $('#color').empty();
                }
            }
        })
    })
    $(function() {
        var arr = [];
        $('#data').children().each(function() {
            var liText = $(this).text();
            arr.push(liText);
        });
        $('#c-product_name').on('keyup', function() {
            $('#dynamicUl').find("li").remove();
            $('#dynamicUl').show();
            var inputCont = $('#c-product_name').val();
            for (var i = 0; i < arr.length; i++) {
                if ((arr[i].indexOf(inputCont)) != -1) {
                    $('#dynamicUl').append($('<li onclick="removeUl(this)" style="margin-left:-25px;cursor:pointer;">' + arr[i] + '</li>'));
                }
            }
        })
        $('#dynamicUl').on('click', 'li', function() {
            $('#c-product_name').val($(this).text());
            var product_name = $('#c-product_name').val();
            $.ajax({
                type:"POST",
                url:"{:url('admin/WarehousingDetail/getColor')}",
                data:{data:product_name},
                dataType:"json",
                success:function (data) {
                    if (data.status == 1){
                        var str = '<div class="radio">';
                        $.each(data.formula,function (key,value) {
                            if (key == 0){
                                str += '<label><input type="radio" name="row[formula]" value="'+value+'" checked/> '+value+'</label>';
                            }else{
                                str += '<label><input type="radio" name="row[formula]" value="'+value+'" /> '+value+'</label>';
                            }

                        })
                        str += '</div>';
                        $('#formula').empty();
                        $('#formula').append(str);
                        var html='<div class="radio">';
                        $('#c-product_number').val(data.data[0].product_number);
                        $.each(data.data,function (k,v) {

                            html  += '<label><input type="radio" name="row[cid]" value="'+v.id+'" /> '+v.color+'</label>';
                        })
                        html+= '</div>';
                        $('#color').empty();
                        $('#color').append(html);
                        $('#c-order_number').focus();
                    }else{

                        $('#color').empty();
                    }
                }
            })
        })
        removeUl = function() {
            $('#dynamicUl').hide();
        }
    })
</script>