jQueryui autocomplete使用示例

浏览数：25 / 时间：2015年06月09日

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