<input  id="province" name="province"></li>
<input  id="city" name="city"  type="text"></li>

<script src="js/jquery.min.js"></script><script src="js/jquery-ui.min.js"></script>

<script>var url = "<%=servlet.getPath() %>";var lastXhr;$("#province").autocomplete({minLength: 1,source: function (request, response) {var term = request.term;lastXhr = $.getJSON(url+"?beanName=ProvinceData", request, function (data, status, xhr) {if (xhr === lastXhr) {response( $.grep( data, function( item ){if(item.indexOf(request.term)!=-1)return item;}) ); }});},select:function(event, ui){$("#city").autocomplete({minLength:1,source:function(request1,response1){var term = request1.term;$.getJSON(url+"?beanName=CityData&province="+ui.item.value,request1,function(data1,status1,xhr1){response1($.grep(data1,function(item){if(item.indexOf(request1.term)!=-1)return item;}));});}});}});
</script>

@BeanDef(value="ProvinceData",scope=PrototypeScope.class)public static Object provinceData(@BeanRef ProvinceService provinceService) throws Exception{List<Province> provinces = provinceService.getProvinceByName(new String(""));List<String> nameList = new ArrayList<String>();for(Province province:provinces){nameList.add(province.getName());}JsonModel model = new JsonModel(nameList);return model;}@BeanDef(value="CityData",scope=PrototypeScope.class)public static Object cityData(@Param("province")String province,@BeanRef ProvinceService provinceService,@BeanRef CityService cityService) throws Exception{System.out.println(province);List<Province> provinces = provinceService.getProvinceByName(province);List<String> nameList  = new ArrayList<String>();if(provinces != null && provinces.size()==1){List<City> cities = cityService.getCityByProvinceID(provinces.get(0).getId());for(City city:cities){nameList.add(city.getName());}}else{nameList.add("");}JsonModel model = new JsonModel(nameList);System.out.println(model.toString());return model;}