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=" 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"组件。

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