jquery ui autocomplete ajax动态访问

最新推荐文章于 2022-07-12 17:36:22 发布

原创最新推荐文章于 2022-07-12 17:36:22 发布 · 695 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#autocomplete #ajax #动态

jQuery 专栏收录该内容

16 篇文章

订阅专栏

本文介绍如何使用jQuery库实现自动完成文本框的功能，包括引入必要的样式和脚本文件，配置自动完成属性，以及展示自动完成效果。通过实例演示了如何在前端开发中高效地实现自动补全功能。

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

<!-- 需要的js  css   -->
 <link href="<%=basePath%>js/autocomplete/jquery-ui-1.10.3.custom.css" rel="stylesheet">
        <script src="<%=basePath%>js/jquery-1.7.2.min.js"></script>
        <script src="<%=basePath%>js/autocomplete/jquery-ui-1.10.3.custom.js"></script>
    <script>
        $(function(){
            $( "#autocomplete" ).autocomplete({
                minLength: 1,//最少输入1个字符才执行
                source: 'autocomplete.action'
            });
        })
    </scrip

定义一个文本框

 <input id="autocomplete" title="type "a"">

java 代码

try {
			
			//brandName="Jörn Zaefferer, Scott González, John Resig,桑陈,何心远,";
			  String[] temp = "align,both,card,dream,error,fail,gson,hello,invaid,job,kill".split(",");
		        String name = "[";
		        for(int i=0;i<temp.length;i++){
		            if(temp[i].indexOf(temp[i])!=-1){
		                name += "\""+temp[i]+"\",";
		            }
		        }
		        if(name.length() > 1)
		            name = name.substring(0,name.length()-1);
		        name+="]";
		        
		        System.out.println(name);
		        
		        HttpServletResponse res = ServletActionContext.getResponse();
		        PrintWriter pw = res.getWriter();
		        pw.write(name);
		        pw.flush();
		        pw.close();
		        return null;
		} catch (Exception e) {
			// TODO: handle exception
		}

效果图

注:因为数据是我后台写死的