SPRING MVC 结合jquery autocomplete 与 json 的例子

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

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 List countries;
    private List tags;
     
    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 List getCountryList(String query) {
                 
        String country = null;
        query = query.toLowerCase();
        List matched = 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 List getTechList(String query) {
        String country = null;
        query = query.toLowerCase();
        List matched = 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 List getCountryList(@RequestParam("term") String query) {
        List countryList = dummyDB.getCountryList(query);
         
        return countryList;
    }
 
    @RequestMapping(value = "/get_tech_list", 
                    method = RequestMethod.GET, 
                    headers="Accept=*/*")
    public @ResponseBody List getTechList(@RequestParam("term") String query) {
        List countryList = dummyDB.getTechList(query);
         
        return countryList;
    }
}

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

在看一下 spring-servlet 的配置


         
     
      
 
    
 
 
    
        
        
        
    



再看下视图层是怎么样的
<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>


    Spring MVC Autocomplete with JQuery &amp; JSON example
    
 
    
    
 


 

Spring MVC Autocomplete with JQuery &amp; JSON example

Name
Country
Technologies


运行就可以看到效果了。

上一篇: 在JSP中如果很长的网址怎么缩短呢
下一篇: jquery UI autocomplete 在获取焦点得到显示列表
 评论 ( What Do You Think )
名称
邮箱
网址
评论
验证
   
 

 


  • 微信公众号

  • 我的微信

站点声明:

1、一号门博客CMS,由Python, MySQL, Nginx, Wsgi 强力驱动

2、部分文章来源于互联网, 若有侵权, 联系邮箱:summer@yihaomen.com, 同时欢迎大家注册用户,主动发布文章.

3、鄂ICP备14001754号-3, 鄂公网安备 42280202422812号