jQuery easyui combobox级联及内容联想

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

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

2.实现：

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

 1                     <tr id="districtLine" style="display: none;">
 2                         <th>请选择地区：</th>
 3                         <td>
 4                             <select id="districtId" name="districtId"
 5                                 style=" 171px;" onchange="createCities();">
 6                                     <c:forEach var="dist" items="${districts}" varStatus="abc">
 7                                         <c:choose>
 8                                             <c:when test='${abc.index eq 0}'>
 9                                                 <option value="${dist.districtId }" selected="selected">${dist.districtName }</option>
10                                             </c:when>
11                                             <c:otherwise>
12                                                 <option value="${dist.districtId }">${dist.districtName }</option>
13                                             </c:otherwise>
14                                         </c:choose>
15                                     </c:forEach>
16                             </select>
17                         </td>
18                     </tr>
19                     <tr id="districtLine2" style="display: none;">
20                         <th>请选择城市：</th>
21                         <td>
22                             <input name="districtId2" id="districtId2"/>
23                         </td>
24                     </tr>

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

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

 1 function createCities(){
 2     var daqu = $('#districtId').val();
 3       $.ajax({
 4          url:'${pageContext.request.contextPath}/goods/getCitiesByDaqu',
 5          type:'post',
 6          dataType:'json',
 7          data:{daquId:daqu},
 8          success:function(cities){
 9              $('#districtId2').combobox({
10                   valueField:'districtId',
11                   textField:'districtName',
12                    data:cities,
13                    filter:function(q,row){
14                        return row.districtName.indexOf(q)>=0;
15                    }
16                  });
17          }
18       });
19 }

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

1 $(function() {
2         createCities();
3 });

3、结果展示

(1)级联结果展示

(2)内容模糊匹配展示

4、后记

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

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

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

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

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

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