JS地址自动返填技术

　　系统设计地址为省市县三级联动，规范是规范了，但是无形中增加了系统操作的时间成本，因此设计地址自动返填技术，只要把地址拷贝到详细地址框中，可以自动返填到省市县三级联动的下拉框中。

　　还好洒家的大学不是混过来的，写起这个模块来感觉饶有趣味。

一、dom结构

　　省市县三级自然以三个下拉框的形式展现，详细地址为一个textarea框，id分别使用province、city、coll、detailAddress代表。

 <%@ page contentType="text/html;charset=UTF-8" language="java"%>
 <%@include file="/WEB-INF/webpage/common/taglibs.jspf"%>
 <!-- Author : guanghe-->
 <%--
     引用方法：
     <form id="itemForm" action="item" method="post">
         <jsp:include page="../../common/address.jsp">
             <jsp:param name="init" value="true" />
             <jsp:param name="amount" value="false" />
         </jsp:include>
     </form>
 --%>
 <table  class="table table-bordered  table-condensed dataTables-example dataTable no-footer">
     <tbody>
         <tr>
             <td  class="width-15 active text-right">
                 <label><font color="red">*</font>名称:</label>
             </td>
             <td class="width-35">
                 <input  id="name" name="name" class="form-control inputxt"  datatype="*" errormsg="请填写名称！" />
                 <label class="Validform_checktip"></label>
             </td>
         </tr>
         <tr>
             <td  class="width-15 active text-right">
                 <label><font color="red">*</font>联系人:</label>
             </td>
             <td class="width-35">
                 <input id="contactsName" name="contactsName" class="form-control inputxt"  datatype="*" errormsg="请填写联系人！" />
                 <label class="Validform_checktip"></label>
             </td>
         </tr>
         <tr>
             <td  class="width-15 active text-right">
                 <label>电话:</label>
             </td>
             <td class="width-35">
                 <input id="phone" name="phone" class="form-control inputxt"  datatype="/(^13[0-9]{9}$|14[0-9]{9}|15[0-9]{9}$|18[0-9]{9}$)|^\-$|^\s*$/" errormsg="请填写固话号、手机号或空！"  />
                 <label class="Validform_checktip"></label>
             </td>
         </tr>
         <c:if test="${param.amount}">
             <tr>
                 <td  class="width-15 active text-right">
                     <label><font color="red">*</font>配送数量:</label>
                 </td>
                 <td class="width-35">
                     <input type="text" id="amount" name="text" class="form-control inputxt" datatype="/^[1-9][0-9]*$/" errormsg="请填写配送数量！" />
                     <label class="Validform_checktip"></label>
                 </td>
             </tr>
         </c:if>
         <tr>
             <td  class="width-15 active text-right">
                 <label><font color="red">*</font>地址:</label>
             </td>
             <td class="width-35">
                 <div style="margin-bottom: 5px;">
                     <select name="province" class="inputxtcommon" id="province"
                             onchange="changCity('${adminPath}/basic/usualaddress/regionSelect');">
                         <option value="0">请选择省份</option>
                     </select>
                     <select name="city" class="inputxtcommon" id="city"
                             onchange="changColl('${adminPath}/basic/usualaddress/regionSelect')">
                         <option value="0">请选择市</option>
                     </select>
                     <select name="coll" id="coll" class="inputxtcommon" onchange="setColl() ">
                         <option value="0">请选择区</option>
                     </select>
                 </div>
                 <div>
                     <textarea id="detailAddress" name="detailAddress" class="form-control inputxt" datatype="*" errormsg="请填写具体地址！"></textarea>
                     <label class="Validform_checktip"></label>
                 </div>
             </td>
         </tr>
     </tbody>
 </table>
 <script>
     //省数据字典
     var proDict = null;
     //页面初始化
     $(function(){
         <c:if test="${param.init}">
             var address = null;
             <c:if test="${not empty data && not empty data.province}">
                 address = {
                     province : "${data.province}",
                     city : "${data.city}",
                     coll : "${data.coll}",
                     detailAddress : "${data.detailAddress}"
                 };
             </c:if>
             //初始化地址组件
             setAddress(address);
             //加载已有数据
             var item = {
                 name : "${data.name}",
                 contactsName : "${data.contactsName}",
                 phone : "${data.phone}",
                 <c:if test="${param.amount}">
                     amount : "${data.amount}"
                 </c:if>
             };
             setItem(item);
         </c:if>
     });
     //初始化地址组件
     function setAddress(address) {
         proDict = window.initSelect(1, 'province','${adminPath}/basic/usualaddress/regionSelect');
         //加载默认地址数据
         if(address && address.province) {
             window.$("#province").val(address.province);
             window.changCity('${adminPath}/basic/usualaddress/regionSelect');
             window.$("#city").val(address.city);
             window.changColl('${adminPath}/basic/usualaddress/regionSelect');
             window.$("#coll").val(address.coll);
             window.$("#detailAddress").val(address.detailAddress);
         }
         //绑定地址自动识别功能
         $("#detailAddress").blur(function(e) {
             autoRecognition(1, 1);
         });
     }
     //初始化已有地址相关数据
     function setItem(item) {
         $("#name").val(item.name);
         $("#contactsName").val(item.contactsName);
         $("#phone").val(item.phone);
         <c:if test="${param.amount}">
             $("#amount").val(item.amount);
         </c:if>
     }
     //获取地址字段信息
     function getItem() {
         var proId = $("#province").val();
         var directCity = [2, 3, 10, 23];
         var address = "";
         if($.inArray(proId - 0, directCity) >= 0) {
             address = $("#province").find("option:selected").text() +
                 $("#coll").find("option:selected").text() + $("#detailAddress").val();
         } else {
             address = $("#province").find("option:selected").text() +  $("#city").find("option:selected").text() +
                 $("#coll").find("option:selected").text() + $("#detailAddress").val();
         }
         return {
             name : $("#name").val(),
             contactsName : $("#contactsName").val(),
             phone : $("#phone").val(),
             <c:if test="${param.amount}">
                 amount : $("#amount").val(),
             </c:if>
             province : $("#province").val(),
             city : $("#city").val(),
             coll : $("#coll").val(),
             detailAddress : $("#detailAddress").val(),
             address : address
         };
     }
 </script>

二、工具函数与核心递归函数

　　主要是设计地址数据的查询、dom修改工具函数、核心递归函数

 //初始化选项，并拿到数据字典
 function initSelect(pid, selectId,url) {
     var dict = {};
     selectUrl = url;
     $("#" + selectId + "").find('option').not(':eq(0)').remove();
     $.ajax({
         url : url,
         type : 'post',
         dataType : "json",
         data : { pid : pid },
         async : false,
         success : function(result,status,xhr) {
             var list = result.list;
             var options = "";
             for (var index in list) {
                 var opt = list[index];
                 options += '<option value="' + opt.id+'">' + opt.name + '</option>';
                 dict[opt.id] = opt.name;
             }
             $("#" + selectId + "").append(options);
         },
         error : function(xhr,status,err) {
             top.layer.alert(err);
         }
     });
     return dict;
 }
 function changCity(url) {
     var dict = null;
     if ($("#province").val() != 0) {
         dict = initSelect($("#province").val(), 'city',url);
         province = $("#province").find("option:selected").text();
         $("#coll").find('option').not(':eq(0)').remove();
     }else{
         $("#city").find('option').not(':eq(0)').remove();
         $("#city").val("0");
         $("#coll").find('option').not(':eq(0)').remove();
         $("#coll").val("0");
     }
     return dict;
 }
 function changColl(url) {
     var dict = null;
     if ($("city").val() != 0) {
         dict = initSelect($("#city").val(), 'coll',url);
         city = $("#city").find("option:selected").text();
     }
     return dict;
 }
 //地址自动识别器    level 1：省  2：市  3：县
 function autoRecognition(level, pid) {
     var address = $("#detailAddress").val();
     var isMatched = false;  //终止器
     //迭代体
     if(address && level) {  //剪枝函数
         var url = '${adminPath}/basic/usualaddress/regionSelect';
         var dict = null;
         var dom = null;
         var nextLevel = null;
         var exeMatcher = true;
         if(level == 1) {
             dict = proDict;
             dom = "#province";
             nextLevel = 2;
         } else if(level == 2){
             dict = window.changCity(url);
             dom = "#city";
             nextLevel = 3;
             //如果是直辖市
             if($.inArray(pid - 0, [2, 3, 10, 23]) >= 0) {
                 //关闭匹配器
                 exeMatcher = false;
             }
         } else if(level == 3) {
             dict = window.changColl(url);
             dom = "#coll";
             nextLevel = 0;
         }
         //开启匹配则运行匹配器
         if(exeMatcher) {
             $.each(dict, function(key, value) {
                 if(address.indexOf(value) == 0) {
                     window.$(dom).val(key);
                     address = address.substring(value.length, address.length);
                     $("#detailAddress").val(address);
                     autoRecognition(nextLevel, key);
                     isMatched = true;
                     return false;
                 }
             });
         } else {  //直辖市跳过市级遍历，直接进入区级遍历
             $.each(dict, function(key, value) {
                 window.$(dom).val(key);
                 var isFound = autoRecognition(nextLevel, key);
                 if(isFound) {
                     return false;
                 }
             });
         }
     }
     return isMatched;
 }