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

?

轉載于:https://www.cnblogs.com/blackckat-hm/p/3873815.html

總結

以上是生活随笔為你收集整理的jQueryui autocomplete使用示例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。