java autocomplete案例_SPRING MVC 结合jquery autocomplete 与 json 的例子

autocomplete 是一个很不错的WEB展现，幸运的是jquery 已经提供了这样的一个插件. 应该包含在jquery UI 中。在用搜索引擎的时候，比如，百度，谷歌，当我们输入一些要查询的内容的时候，会自动出现一些相关的东西，这就是autocomplete. 其实应该是不难的。先自己想想，在没有任何插件的情况下，一般是这样完成的，根据输入的内容，发送AJAX请求到后台，然后返回内容，在前台用DIV 展示。基本就是这样，当然有很多细节要处理。这里讲一个简单的例子：

有两个字段，一个 country, 一个Technologies,这两个字段都是autocomplete特性。唯一不同的是，country 字段只能选择一个值，而Technologies字段可以选择多个值，并且用 逗号(，)分开.

先看看主要用到的东西吧：

JQuery UI (autocomplete)

spring mvc 3.0 以上，还要包含jackson这个jar包，因为打算返回json对象给前端。

具体连接数据库部分，就省略，可以先dummy一个。import java.util.ArrayList;

import java.util.List;

import java.util.StringTokenizer;

public class DummyDB {

private Listcountries;

private Listtags;

public DummyDB() {

String data = "Afghanistan, Albania, Algeria, Andorra, Angola, Antigua & Deps,"+

"United Kingdom,United States,Uruguay,Uzbekistan,Vanuatu,Vatican City,Venezuela,Vietnam,Yemen,Zambia,Zimbabwe";

countries = new ArrayList();

StringTokenizer st = new StringTokenizer(data, ",");

//Parse the country CSV list and set as Array

while(st.hasMoreTokens()) {

countries.add(st.nextToken().trim());

}

String strTags = "SharePoint, Spring, Struts, Java, JQuery, ASP, PHP, JavaScript, MySQL, ASP, .NET";

tags = new ArrayList();

StringTokenizer st2 = new StringTokenizer(strTags, ",");

//Parse the tags CSV list and set as Array

while(st2.hasMoreTokens()) {

tags.add(st2.nextToken().trim());

}

}

public ListgetCountryList(String query) {

String country = null;

query = query.toLowerCase();

Listmatched = new ArrayList();

for(int i=0; i < countries.size(); i++) {

country = countries.get(i).toLowerCase();

if(country.startsWith(query)) {

matched.add(countries.get(i));

}

}

return matched;

}

public ListgetTechList(String query) {

String country = null;

query = query.toLowerCase();

Listmatched = new ArrayList();

for(int i=0; i < tags.size(); i++) {

country = tags.get(i).toLowerCase();

if(country.startsWith(query)) {

matched.add(tags.get(i));

}

}

return matched;

}

}

这个类，包含了country 和 technologies 的值，通过getCountryList，getTechList方法 得到相关的值，比如在参数中传入一个 ch ,那么所有以 ch 开头的国家都筛选出来了。 其实这里没模拟的就是 sql like语句 .

下面再看controller 层怎么写的。

import java.util.List;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RequestMethod;

import org.springframework.web.bind.annotation.RequestParam;

import org.springframework.web.bind.annotation.ResponseBody;

import org.springframework.web.servlet.ModelAndView;

@Controller

public class UserController {

private static DummyDB dummyDB = new DummyDB();

@RequestMapping(value = "/index", method = RequestMethod.GET)

public ModelAndView index() {

User userForm = new User();

return new ModelAndView("user", "userForm", userForm);

}

@RequestMapping(value = "/get_country_list",

method = RequestMethod.GET,

headers="Accept=*/*")

public @ResponseBody ListgetCountryList(@RequestParam("term") String query) {

ListcountryList = dummyDB.getCountryList(query);

return countryList;

}

@RequestMapping(value = "/get_tech_list",

method = RequestMethod.GET,

headers="Accept=*/*")

public @ResponseBody ListgetTechList(@RequestParam("term") String query) {

ListcountryList = dummyDB.getTechList(query);

return countryList;

}

}

注意，用了 @ResponseBody annotation 在方法 getCountryList() 和getTechList() 上. Spring MVC 会将这些list 转为JSON对象

在看一下 spring-servlet 的配置

再看下视图层是怎么样的

Spring MVC Autocomplete with JQuery & JSON example

Spring MVC Autocomplete with JQuery & JSON exampleName

Country

Technologies

运行就可以看到效果了。