jquery AutoComplete 插件与struts2集成

AutoCompleteAction.java

@SuppressWarnings("serial") @ParentPackage(value = "actions" ) public class AutoCompleteAction extends ActionSupport{ public static final Log LOG = LogFactory.getLog(AutoCompleteAction.class); //注入keywordsService private KeywordsService keywordsService; //返回的关键词列表 private List<String> words; private String q; /** 处理自动完成请求 */ @Action(value = "/autoComplete", results = { @Result(name = "success", type="json") }) public String autoComplete(){ words = new ArrayList<String>(); List<String> keywords = keywordsService.queryWords(q); System.out.println(keywords.size()); for(int i = 0; i < keywords.size(); i++){ if(i < 10){//取10个词 words.add(keywords.get(i)); } } return SUCCESS; } @JSON(serialize=true) public List<String> getWords() { return words; } public void setWords(List<String> words) { this.words = words; } public KeywordsService getKeywordsService() { return keywordsService; } public void setKeywordsService(KeywordsService keywordsService) { this.keywordsService = keywordsService; } public String getQ() { return q; } public void setQ(String q) { this.q = q; } }

需引入js文件

<mce:script type="text/javascript" src="js/jquery-1.4.4.js" mce_src="js/jquery-1.4.4.js"></mce:script> <mce:scripttype="text/javascript" src="./js/ui/jquery.ui.core.js"></mce:script> <mce:script type="text/javascript"src="./js/ui/jquery.ui.widget.js"></mce:script> <mce:script type="text/javascript"src="./js/ui/jquery.ui.position.js"></mce:script> <mce:script type="text/javascript"src="./js/ui/jquery.ui.autocomplete.js"></mce:script>   

前台请求js

$(document).ready(function(){ $( "#q" ).autocomplete({ minLength: 1, source: function( request, response) { $.ajax({ url: "autoComplete.action", dataType: "json", data: { q: $("#q").val() }, success:function(json){ response( $.map( json.words, function( name ) { return { label: name, value: name } })); } }); } });

其中q为你想要添加自动完成的文本框如：

<input type="text" name="q" id="q" >