首页 > 代码库 > jQueryui autocomplete使用示例

jQueryui autocomplete使用示例

html标签:

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

 

需要引入的js文件:

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

页面上的javascript代码

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

服务端的java代码:

@BeanDef(value="http://www.mamicode.com/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;    }