jquery自动提示控件autocomplete使用总结

引入必要的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行，插入如下代码：

1. . bind ( " input " , function () {
2.     // @hack by liqt:support for inputing  chinese characters  in firefox
3.     onChange ( 0 , true ) ;
4. }) ;

==========================================
再转一些配置信息感谢paskaa

对autocomplete的一些参数进行说明

Options:

Name Type minChars delay cacheLength matchSubset matchCase matchContains mustMatch selectFirst extraParams

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

 

今天添加个自动提示控件，一番周折。具体步骤：