jquery AutoComplete 插件与struts2集成

最新推荐文章于 2025-08-17 17:24:42 发布

laigood

最新推荐文章于 2025-08-17 17:24:42 发布

阅读量3k

点赞数

CC 4.0 BY-SA版权

分类专栏： JQUERY 文章标签： autocomplete struts jquery function string json

本文链接：https://blog.youkuaiyun.com/laigood/article/details/6401742

JQUERY 专栏收录该内容

1 篇文章

订阅专栏

本文详细解析了自动补全Action的实现方式，包括如何通过关键字服务查询并返回前10个匹配的关键词，以及如何使用jQuery UI库进行前端自动补全功能的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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