工作中涉及到 需要带有输入提示的功能(如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, 这个属性,如下效果
这里我发现这个控件一写问题:
1
比如第二个记录南京,前面会有一个空格
(有兴趣的朋友可以仔细跑一下发现这个问题,后面第二 第三个 以及后续的数据都会有空格,用SPLIT 分割取得数据的时候一定要注意TRIM了)
2
下面运行提示后用鼠标点击或者回车选中响应 鼠标和回车事件(没有问题)
IE下面firefox 只能用回车选中,用鼠标选中后,数据会乱如下效果
(官网的DEMO也有类似问题):
写好DEMO 觉的挺容易的马上移植项目中,结果又遇到不少的问题
1 系统中用了prototype.js 在加入jquery.js 页面效果出不来,后来找到问题了prototype.js 和jquery.js冲突
官网下载的jquery.js 是1.2.6版本的,网上有说法改写jquery 的$结果没搞定,后来升级jquery.js 1.4.2 问题解决
2我们系统中用了sitemesh 做装饰,页面头尾都不需要关心的,autoComplete.jsp 返回的结果不是JSON 后又给装饰后加了头尾HTML 数据流了,这样autoComplete控件就无效了
一定要确定在服务端返回的数据流最终
是JSON 格式数据
总结:项目中往往和简单的DEMO 在运行环境和其他。。又不同的地方,需要具体问题具体分析解决之
- 大小: 6.5 KB
- 大小: 6.3 KB
- 大小: 4.5 KB
分享到:
相关推荐
ASP.NET用JQuery插件实现的AutoComplete实例说明(源码)
jQuery自动完成插件autocomplete.zip
Jquery autocomplete插件使用
jquery自动补全插件(jquery autocomplete) 内包含使用说明,前台+后台
jquery的一个autocomplete插件 不是ui里的那个,简单实用。
1.该js支持jquery的自动补全功能 2.因为jquery-ui是jquery的插件,所以部分版本jquery可能不支持该插件,建议换成内附的jquery.js 3.如有疑惑,请阅读内附的说明文档
jQuery plugin for autocomplete - jQuery自动完成插件
Jquery插件的使用--AutoComplete
jquery搜索自动提示下拉框插件autocomplete
这个是我在学习jquery过程中积累下来的一点东西.有些示例在我前面上传的资源中已经有了.里面都是一些入门性的示例.数据库采用的SQLServer2000的northwind数据库.数据访问用了Enterprise library DAAB;虽然只是简单的...
jQuery plugin: Autocomplete 参数及实例 官网:jQuery plugin: Autocomplete 此插件依赖于 jquery 1.2.6 --- jquery 1.8.3 转自:http://www.cnblogs.com/duanhuajian/p/3398904.html
使用Jquery AutoComplete 插件来做自动填充功能,包含本地数组,后台数据等情况
jquery 文本框 自动补全 ajax autocomplete 完整实例
在写一个输入框提示内容的功能时,找到了jQuery autocomplete自动补齐这个插件,如获至宝,但是从网上下载后自己用起来总是出问题,原来他只匹配jQuery1.7以下的版本,但是我的其他插件要用jQuery3的版本,这时候就...
利用Jquery.AutoComplete插件及微软提供的ChineseConverter.dll实现汉字、拼音、简拼模糊搜索
NULL 博文链接:https://canrry.iteye.com/blog/750679
autocomplete, jQuery自动完成插件,如Google自动完成 电子邮件自动完成文档&演示插件jQuery自动完成插件如谷歌搜索 npm install jquery-autocomplete
自己做了一个jQuery的AutoComplete插件,与官方的不同实现方式不同,里面带有例子 具体请看http://blog.csdn.net/luq885/archive/2007/05/27/1627389.aspx<br/>
jquery-autocomplete 自动完成插件
项目中有时会用到自动补全查询,就像Google搜索框、淘宝商品搜索功能,输入汉字或字母,则...下面来使用 autocomplete插件来实现类似效果。 1. 创建 AjaxPage.aspx 页面,在其中定义 WebMethod 方法来返回 搜索页面需要