jQuery easyui combobox级联及内容联想

1、需求：已有一个下拉框A表示地区，现新增需求，需要在A选择不同地区时，增加一个展示该地区所有城市的下拉框B，

由于城市较多，要求B能实现用户输入和模糊匹配展示功能。

2.实现：

(1)首先在A下面把B列出来，然后给A加一个onchange事件，当内容改变时调用createCities函数。

                     <tr id="districtLine" style="display: none;">
                         <th>请选择地区：</th>
                         <td>
                             <select id="districtId" name="districtId"
                                 style="width: 171px;" onchange="createCities();">
                                     <c:forEach var="dist" items="${districts}" varStatus="abc">
                                         <c:choose>
                                             <c:when test='${abc.index eq 0}'>
                                                 <option value="${dist.districtId }" selected="selected">${dist.districtName }</option>
                                             </c:when>
                                             <c:otherwise>
                                                 <option value="${dist.districtId }">${dist.districtName }</option>
                                             </c:otherwise>
                                         </c:choose>
                                     </c:forEach>
                             </select>
                         </td>
                     </tr>
                     <tr id="districtLine2" style="display: none;">
                         <th>请选择城市：</th>
                         <td>
                             <input name="districtId2" id="districtId2"/>
                         </td>
                     </tr>

(2)createCities，在ajax从后台取地区所有城市成功以后，用easyui的combobox创建下拉框，关键是combobox的filter属性。function的第一个参数q是用户输入的内容，第二个参数row是combobox内的每一项

数据，如果程序员使用了combobox的filter方法，当用户在combobox中输入内容时，针对每一条combobox中的数据都会调用function，如果返回true则表示过滤成功，过滤成功的意思就是展示出来。

 function createCities(){
     var daqu = $('#districtId').val();
       $.ajax({
          url:'${pageContext.request.contextPath}/goods/getCitiesByDaqu',
          type:'post',
          dataType:'json',
          data:{daquId:daqu},
          success:function(cities){
              $('#districtId2').combobox({
                   valueField:'districtId',
                   textField:'districtName',
                    data:cities,
                    filter:function(q,row){
                        return row.districtName.indexOf(q)>=0;
                    }
                  });
          }
       });
 }

(3)在页面加载完毕以后就调用createCities

 $(function() {
         createCities();
 });

3、结果展示

(1)级联结果展示

(2)内容模糊匹配展示

4、后记

我们使用easyui的combobox构造的下拉框，当用户正常使用它也就是当用户选中了某一项时，表单提交到后台的数据也是正常的select option中的value，

但当用户在combobox中手动输入内容，并未点选任何combobox列出的内容时，表单提交到后台的数据却是用户输入的内容。

比如：如果沧州的districtId是100，当用户输入州，并点选了联想结果中的沧州以后，提交表单以后后台接收到的district2内容是100，

如果用户没有点选联想结果，而是在城市下拉框外的地方点击了一下使下拉框失去焦点，这时提交表单以后后台接收到的district2内容是"州"。

原因是第一种情况easyui将district2翻译成<select>下拉框组件，而第二种情况easyui将district2翻译成input type="text"组件。

这个问题必须在后台加以区分，否则会出错。