码迷,mamicode.com
首页 > Web开发 > 详细

jQueryui autocomplete使用示例

时间:2014-07-29 10:55:36      阅读:241      评论:0      收藏:0      [点我收藏+]

标签:style   blog   java   color   使用   os   文件   io   

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

 

jQueryui autocomplete使用示例,布布扣,bubuko.com

jQueryui autocomplete使用示例

标签:style   blog   java   color   使用   os   文件   io   

原文地址:http://www.cnblogs.com/blackckat-hm/p/3873815.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!