jQueryui autocomplete使用示例

<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;
}