Jquery 插件jquery autocomplete使用

wwwzhouhui

浏览: 361113 次
性别:
来自: 上海

最近访客更多访客>>

nwljy

kylecust

pls56081242

zaneabc

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Jquery

jQuery json JSP JavaScript CSS

工作中涉及到需要带有输入提示的功能（如google 搜索提示那样）网上找了一些资料，最好选定jquery autocomplete 来实现，下面介绍一下使用已经，项目中遇到的一写问题

index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <%String root=request.getContextPath();%>
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="description" content="This is my page">
	<script type="text/javascript" src="<%=root%>/js/jquery.js"></script>
	<script type='text/javascript' src='<%=root%>/js/jquery.autocomplete.js'></script>
	<link rel="stylesheet" type="text/css" href="<%=root%>/js/jquery.autocomplete.css" />
	
  </head>
  <script type="text/javascript">
  $().ready(function() {
       function parseFn(data) {   
	       var rows = [];     
	         for(var i=0; i<data.length; i++){     
	            rows[rows.length] = {
	                data:data[i],      　　　　　　 //下拉框显示数据格式 
	                value:data[i].name,      //选定后实际数据格式  
	                result:data[i].name　　//选定后输入框显示数据格式 
	            };      
	          }     
	         return rows; 
       }
       //var myJSONObject =[{"id":"1","name":"bj"},{"id":"2","name":"sh"},{"id":"3","name":"天津"},{"id":"4","name":"重庆"},{"id":"5","name":"广州"},{"id":"6","name":"深圳"},{"id":"7","name":"南京"},{"id":"8","name":"济南"},{"id":"9","name":"杭州"},{"id":"10","name":"苏州"}];
         var myJSONObject =[{"id":"ak540","name":"zhangliang2"},{"id":"akc696","name":"zhangliang"}];
  		$("#suggest3").autocomplete('autoComplete.jsp', {
		multiple: true,
		autoFill: true,
		mustMatch :true,
		matchContains: true,
		//extraParams:{q:function(){return $("#this").val();}}, 
		dataType: 'json', 　　　　　　
     	parse:parseFn,
        formatItem: function(row,i,max) {              
     		return row.name;
    	},
    	formatMatch: function(row,i,max){       
     		return row.name;
    	},
	    formatResult: function(row,i,max){
	     return row.name;
	    } 
	    // }).result(function(event, item, formatted) {//把返回的结果内容显示在其他文本框上              
         //   $("#ortherid").val(item.name); 
		});
		
  });
  
  </script>
  <body>
   			<label>Multiple Cities (local):</label>
			<textarea id='suggest3' cols='40' rows='3'></textarea>
			<div id="ortherid"></div>
  </body>
</html>

这里主要是用到了jquery.autocomplete.js 里面的$("#suggest3").autocomplete 方法（这方面的资料比较多，具体可以网上搜索，我也是参考官方例子改写的官方网的DEMO 地址：http://jquery.bassistance.de/autocomplete/demo/

主要从后台返回的结果是以JSON 的数据格式返回的

autoComplete.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.util.*" %>
<%@ page import="java.io.*" %>
<%@ page import="com.autoComplete.*"%>
<%
	City city = new City();
 String query =request.getParameter("q");  
 	//query= new String(query.getBytes("ISO-8859-1"), "UTF-8");  
	String json=city.toJoson(query);
	response.setContentType("application/json;charset=UTF-8");
	response.setCharacterEncoding("UTF-8");
	response.setHeader("Pragma", "No-cache");     
	response.setHeader("Cache-Control", "no-cache");     
	response.setDateHeader("Expires", 0);  
	try {
		PrintWriter out2 = response.getWriter();
		out2.write(json);
	} catch (IOException e) {
		e.printStackTrace();
	}
%>

后台JAVA 代码

City

package com.autoComplete;

import java.util.ArrayList;
import java.util.List;
import java.util.regex.Matcher;
import java.util.regex.Pattern;

import net.sf.json.JSONArray;

/***********************************************************************   
 *   
 *   City.java     
 *   @copyright       Copyright:   2009-2012     
 *   @creator         周辉<br/>   
 *   @create-time   2010-8-5   上午11:18:58   
 *   @revision         $Id:     *   
 ***********************************************************************/
public class City {

	/**
	 * 
	 * @return
	 */
	public List<CityBean> getCity() {
		List<CityBean> list = new ArrayList<CityBean>();
		CityBean cityBean = new CityBean();
		cityBean.setId("1");
		cityBean.setName("bj");
		list.add(cityBean);
		CityBean cityBean1 = new CityBean();
		cityBean1.setId("2");
		cityBean1.setName("sh");
		list.add(cityBean1);
		CityBean cityBean2 = new CityBean();
		cityBean2.setId("3");
		cityBean2.setName("天津");
		list.add(cityBean2);
		CityBean cityBean3 = new CityBean();
		cityBean3.setId("4");
		cityBean3.setName("重庆");
		list.add(cityBean3);
		CityBean cityBean4 = new CityBean();
		cityBean4.setId("5");
		cityBean4.setName("广州");
		list.add(cityBean4);
		CityBean cityBean5 = new CityBean();
		cityBean5.setId("6");
		cityBean5.setName("深圳");
		list.add(cityBean5);
		CityBean cityBean6 = new CityBean();
		cityBean6.setId("7");
		cityBean6.setName("南京");
		list.add(cityBean6);
		CityBean cityBean7 = new CityBean();
		cityBean7.setId("8");
		cityBean7.setName("济南");
		list.add(cityBean7);
		CityBean cityBean8 = new CityBean();
		cityBean8.setId("9");
		cityBean8.setName("杭州");
		list.add(cityBean8);
		CityBean cityBean9 = new CityBean();
		cityBean9.setId("10");
		cityBean9.setName("苏州");
		list.add(cityBean9);
		return list;
	}

	public String toJoson(String query) {
		List<CityBean> list = getCity();
		List<CityBean> list2 = search(query, list);
		//JsonConfig jsonConfig = new JsonConfig();
		JSONArray jsonArray = JSONArray.fromObject(list2);
		String json = jsonArray.toString();
		return json;
	}

	public List<CityBean> search(String name, List<CityBean> list) {
		List<CityBean> results = new ArrayList<CityBean>();
		Pattern pattern = Pattern.compile(name, Pattern.CASE_INSENSITIVE);
		for (int i = 0; i < list.size(); i++) {
			Matcher matcher = pattern.matcher(((CityBean) list.get(i))
					.getName());
			if (matcher.find()) {
				results.add(list.get(i));
			}
		}
		return results;
	}
}

CityBean 在这里就不贴了

运行效果

我这里项目中需要多列所以用了multiple: true, 这个属性，如下效果