jquery AutoComplete 插件与struts2集成

最新推荐文章于 2025-12-01 17:12:07 发布

最新推荐文章于 2025-12-01 17:12:07 发布 · 74 阅读

文章标签：

#java #json #ui

本文介绍了一个基于Java的自动补全功能实现方案，包括后端处理逻辑和服务调用流程。通过AutoCompleteAction类处理用户输入，并从数据库中检索相关关键词进行匹配，最终返回前十个最相关的词汇供前端展示。

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为你想要添加自动完成的文本框如：