引入必要的js文件一共三个
jquery.js
<script type='text/javascript' src='${jsdir}/autocomplete/jquery.autocomplete.js'></script>
<link href="${jsdir}/autocomplete/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
$(function(){
var temp;
$.ajax({
type: "POST",
url: "suggest.action",
async: false,//锁定浏览器为 temp赋值
success: function(data){
temp=eval(data);//将字符串转换为数组对象赋值给temp
}
});
$("#startperson").autocomplete(temp, {
matchContains: true,
minChars: 0
});
})
====================================
struts2中action代码
public class SuggestAction extends BaseAction {
private static final long serialVersionUID = 1L;
private static final Logger LOG = Logger.getLogger(SuggestAction.class);
private String suggestMessage;//返回的提示信息
private List<GClientinfo> clientinfoList;
public String execute() throws Exception {
clientinfoList = manager.query(new StringBuffer("select new GClientinfo(keyid,clientname) from GClientinfo ").toString());//查询获得list数据
StringBuffer suggestestMessageBuffer = new StringBuffer();
if (clientinfoList==null||clientinfoList.isEmpty()) {
return StrutsResultType.NONE;
}
for (GClientinfo clientinfo : clientinfoList) {
if (suggestestMessageBuffer.length()==0) {
suggestestMessageBuffer.append("[\"")
.append(clientinfo.getClientname())
.append('\"');
continue;
}
suggestestMessageBuffer.append(",\"")
.append(clientinfo.getClientname())
.append('\"');;
}
suggestestMessageBuffer.append("]");
HttpServletResponse response = ServletActionContext.getResponse();
response.setCharacterEncoding("UTF-8");
PrintWriter out= response.getWriter();
out.print(suggestestMessageBuffer.toString());//生成的格式为"["sdfsdf","wer","werwer","werwe","werw"]"out输出给页面
return StrutsResultType.NONE;
}
//省略get、set方法
}
==================================
困扰我半天的问题居然是浏览器不兼容一下内容转自 lichdb
jQuery.Autocomplete 是jquery的流行插件,能够很好的实现输入框的自动完成(autocomplete)、建议提示(input suggest)功能,支持ajax数据加载。
但唯一遗憾的是,在对中文输入法打开时,firefox3.0中是对中文拼音的自动匹配,而对输入后的中文无法及时触发匹配;而在我的IE6.0下,则无此问题。
原因分析:
Autocomplete插件对用户输入字符的触发自动匹配是通过”keydown”事件进行的(可分析
jquery.autocomplete.js第92行),在IE6中,当输入法打开时,输入的字符是不会触发”keydown”的,只有中文输入完毕才
触发之,所以中文输入和latin文没有区别的;但在firefox3.0下,无论输入法打开否,按键都会触发”keydown”事件,所以造成中文输入
完毕,自动匹配的是刚才打出的部分中文拼音字母。
解决方法:
网上查到的最多做法是修改jquery.autocomplete.js第92行,将”keydown”替换为”keyup”,
但这个不是根本办法,虽然这样改后可在firefox中及时对输入的中文进行自动匹配,但将原插件中回车、tab等重要的事件机制破坏了,比如这样改后,
如果你的input是在一个form里的话,回车从原来的将选定项输入到input中变为了直接提交form表单了,这并不是我们想要的。
我的方法原理是,补充一个原插件触发查询的事件,就是当input输入栏发生字符变化时,重新进行查询(调用其内部的onChange函数),这里 主要针对firefox而言,因为我们的系统访问最多的是IE和firefox。而恰好firefox有一个input变化的事件就是oninput ,那么我们只要在原jquery.autocomplete.js第199行,插入如下代码:
- . bind ( " input " , function () {
- ? ? // @hack by liqt:support for inputing? chinese characters? in firefox
- ? ? onChange ( 0 , true ) ;
- }) ;
========================================== 再转一些配置信息感谢paskaa
对autocomplete的一些参数进行说明
Options:
| Number | Default: 1 |
|
执行autocomplete的最小值 The minimum number of characters a user has to type before the autocompleter activates. |
|
| Number | Default: 400 for remote, 10 for local |
|
显示自动自动完成选择框的延迟时间 The delay in milliseconds the autocompleter waits after a keystroke to activate itself. |
|
| Number | Default: 10 |
|
缓存长度 The number of backend query results to store in cache. If set to 1 (the current result), no caching will happen. Must be >= 1. |
|
| Boolean | Default: true |
|
匹配子集 Whether or not the autocompleter can use a cache for more specific queries. This means that all matches of "foot" are a subset of all matches for "foo". Usually this is true, and using this options decreases server load and increases performance. Only useful with cacheLength settings bigger than one, like 10. |
|
| Boolean | Default: false |
|
是否敏感的比较。 Whether or not the comparison is case sensitive. Important only if you use caching. |
|
| Boolean | Default: false |
|
匹配内容。 Whether or not the comparison looks inside (i.e. does "ba" match "foo bar") the search results. Important only if you use caching. Don't mix with autofill. |
|
| Boolean | Default: false |
|
必须完全匹配。 If set to true, the autocompleter will only allow results that are presented by the backend. Note that illegal values result in an empty input box. |
|
| Boolean | Default: true |
|
如果设置为true则第一个值会被自动选中。 If this is set to true, the first autocomplete value will be automatically selected on tab/return, even if it has not been handpicked by keyboard or mouse action. If there is a handpicked (highlighted) result, that result will take precedence. |
|
| Object |
?
今天添加个自动提示控件,一番周折。具体步骤: