四级联动(品名、材质、规格、产地)和自动完成的功能

具体功能：

实现品名、材质、规格、产地的四级联动，并且在品名、材质、规格、产地输入字时会显示下拉框,实现模糊检索，当输入'品名'时,隐藏的品名code会自动带出，当把品名删掉一个或者几个字使其不完全时，品名code会自动消失，并且'品名'也会自动消失。其后的'材质' '规格' '产地'是根据 '品名' 取得的值，这样的好处是后面的材质 规格 产地可以根据下拉框进行选择也可以手动输入，而不是品名决定材质 材质决定规格 规格决定产地这种的四级联动。具体业务参照【合同管理】中【合同】中【品种明细】中“新增”按钮的实现过程。

相关功能实现的具体代码如下：【注意代码格式！！！】

<script type="text/javascript">
//保存数据到数据库中
var i = 0;
var obj = null;
//点击‘新增’按钮时 新增加一条空白记录，然后自己输入数据
$(document).ready(function(){
    $("#addTable").click(function(){  
       var tr="<tr><td><input type=\"checkbox\" name=\"check\"/></td>"+      //复选框
      //品名
       "<td><input type='text' name='item_name' id='item_name"+i+"'  value='<%=item_name%>'>"+
              "<input type='text' name='item_code' id='item_code"+i+"' value=' '></td>"+  
              "<td><input type='text' name='material_name' id='material_name"+i+"' >"+ //材质
              "<td><input type='text' name='spec' id='spec"+i+"'></td>"+   //规格
              "<td><input type='text' name='producer' id='producer"+i+"'></td>"+ //产地
              "<td><input type='text' name='item_weight' id='item_weight'></td>"+   //件重
              "<td><input type='text' name='quantity' id='quantity'></td>"+      //数量
              "<td><input type='text' name='weight' id='weight'></td>"+ //重量
      "<td><select  id='item_measure' name='item_measure'> "+     //计量方式
    //获取下拉框中的 ‘计量方式’ 内容
    <% if(list!=null){
    for(int i=0;i<list.size();i++){
    map = (Map)list.get(i);
    String base_type = myFunc.getValue(map.get("base_type")).toString();
    if(base_type.equals("8")){
    map1 = map;
    String base_name = myFunc.getValue(map1.get("base_name")).toString();
    %>
"<option value='<%=base_name %>'><%=base_name %></option> "+
    <% }
    }
    } %>
          "</select></td>"+   //计量方式
              "<td><input type='text' name='price' id='price'></td>"+  //含税单价
              "<td><input type='text' name='amount' id='amount'></td>"+  //含税金额 = 重量*含税单价
              "<td>17%</td>"+  //税率
              "<td><select  id='warehouse_name' name='warehouse_name'> "+ 

            //获取下拉框中的‘仓库名称’

            [单独在仓库表中，为了便于后期维护  当添加或者删除仓库的时候 只添加数据库即可 不需要改动代码]

              <% if(list2!=null){
              for(int i=0;i<list2.size();i++){
                      map2 = (Map)list2.get(i);
                                        String warehouse_code = myFunc.getValue(map2.get("warehouse_code")).toString();
                                        String warehouse_name = myFunc.getValue(map2.get("warehouse_name")).toString();
              %>
              "<option value='<%=warehouse_name%>'><%=warehouse_name%></option> "+
              <% }
              }
              %>
              "</select></td>"+   //收货仓库  仓库表：t_dict_warehouse
              "<td><input type='text' name='other_fee' id='other_fee'></td>"+  //其他费用
              "<td><input type='text' name='notes' id='notes'></td>"+   //备注
              "<td><a href='#' onclick = 'update()'>修改</a></td>"+   //修改
              "</tr>";

$("#table1").append(tr);

                        //在新增每一行的时候就为每一行添加'自动完成'和'失去焦点'事件

auto_nana("item_name" +i, "item_code"+i, "material_name"+i,"spec"+i,"producer"+i);  //绑定自动完成的事件
blur_nana("item_name" +i, "item_code"+i); // 绑定失去焦点的事件
i++;     
    }); //新增结束  
});  


// {函数}失去焦点事件(‘品名’失去焦点之后清空) 
function blur_nana(obj_name1,obj_code1){
$("#" + obj_name1).blur(function(){
if($("#" + obj_code1).val() == ''){
$("#" + obj_name1).val('');
}else{
if($("#" + obj_name1).val() == ''){
$("#" + obj_code1).val('');
}
}
}); 

}

//name 和 code必须已知绑定关系(name和code已经存在一对一的关系)

obj_name：品名name文本框的id；

obj_code,：品名code文本框的id；

obj_material：材质文本框的id；obj_spec：规格文本框的id；obj_producer：产地文本框的id

function auto_nana(obj_name, obj_code, obj_material,obj_spec,obj_producer){
//模糊查询'品名', 自动显示在下拉框中【‘合同录入’—‘品种明细’中的‘品种’】

var width = 167;

$('#' + obj_name).AutoComplete({
'data': '/admin/js/autocomplete/getCorpInfo2.jsp',
'ajaxDataType': 'json', 
'ajaxParams': {}, 
'itemHeight': 20,
'width': width,
'maxHeight': 300,
'beforeLoadDataHandler': function(keyword){  //选中之前进行的操作

$('#' + obj_code).val(''); //赋空值

                               【材质 规格 产地根据品名的联动 当品名清空时 三个也相应的清空】

                                $("#" + obj_material).val('');   //当清空"品名"的时候 "材质"也相应的清空
$("#" + obj_spec).val('');    //当清空"品名"的时候 "规格"也相应的清空
$("#" + obj_producer).val('');    //当清空"品名"的时候 "产地"也相应的清空

return true;
},
'afterSelectedHandler': function(data) {   //选中之后进行的操作：把查出来的数据存放到文本框中然后显示出来
$('#' + obj_code).val(data.cd);      // 输入‘品名’后把品名的code放到文本框中

//品名-材质二级联动
var width = 167; 
var item_code = $('#' + obj_code).val();  // 根据品名code文本框的id(obj_code)找到品名code的值
$('#' + obj_material).AutoComplete({
'data': '/admin/js/autocomplete/ getCorpInfo3.jsp',
'ajaxDataType': 'json', 

'ajaxParams': {'item_code': item_code}, // 把item_code传到getCorpInfo3.jsp中，以'品名的code'作为条件查出材质，并模糊显示在下拉框中

'itemHeight': 20,
'width': width,
'maxHeight': 300,
'beforeLoadDataHandler': function(keyword){  //选中之前进行的操作
//$("item_code"+i+"").val(''); //赋空值
return true;
},
'afterSelectedHandler': function(data) {   //选中之后进行的操作：把查出来的数据存放到文本框中然后显示出来
  }
});

//品名-规格二级联动
var width = 167; 
var item_code = $('#' + obj_code).val();
$('#' + obj_producer).AutoComplete({
'data': '/admin/js/autocomplete/getCorpInfo5.jsp',
'ajaxDataType': 'json', 
'ajaxParams': {'item_code': item_code},
'itemHeight': 20,
'width': width,
'maxHeight': 300,
'beforeLoadDataHandler': function(keyword){  //选中之前进行的操作
//$("item_code"+i+"").val(''); //赋空值
return true;
},
'afterSelectedHandler': function(data) {   //选中之后进行的操作：把查出来的数据存放到文本框中然后显示出来
  }
});

//品名-产地二级联动
var width = 167; 
var item_code = $('#' + obj_code).val();
$('#' + obj_spec).AutoComplete({
'data': '/admin/js/autocomplete/getCorpInfo4.jsp',
'ajaxDataType': 'json', 
'ajaxParams': {'item_code': item_code},
'itemHeight': 20,
'width': width,
'maxHeight': 300,
'beforeLoadDataHandler': function(keyword){  //选中之前进行的操作
//$("item_code"+i+"").val(''); //赋空值
return true;
},
'afterSelectedHandler': function(data) {   //选中之后进行的操作：把查出来的数据存放到文本框中然后显示出来
  }
});

  }
});
}
</script>