jquery autocomplete插件实现输入框自动补全

最新推荐文章于 2022-03-28 16:46:04 发布

u010785025

最新推荐文章于 2022-03-28 16:46:04 发布

阅读量1.4k

点赞数

分类专栏： java web struts2 Myeclipse 文章标签： jquery autocomple 插件

本文链接：https://blog.csdn.net/u010785025/article/details/51314976

版权

java web 同时被 3 个专栏收录

18 篇文章 0 订阅

订阅专栏

struts2

6 篇文章 0 订阅

订阅专栏

Myeclipse

3 篇文章 0 订阅

订阅专栏

本文介绍了如何使用jQuery的autocomplete插件在jsp页面上创建一个输入框，通过ajax请求从数据库获取提示内容，实现实时自动补全功能。详细步骤包括添加html输入框、引入必要的css和js文件、编写ajax请求以及后台action处理，特别指出需要的jar包以避免运行时错误。

摘要由CSDN通过智能技术生成

需求：如图

提示内容从数据库中取得。

1.jsp页面加入输入框

<s:textfield name="bookName" id="bookName"></s:textfield>

也可用纯html标签。

2.jsp页面加入 autocomplete插件的css和js文件，另外还有jquery的js文件

<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- 引入jQuery UI的css文件 -->
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-darkness/jquery-ui.css" />
<!-- 引入jQuery的js文件 -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js" ></script>
<!-- 引入jQuery UI的js文件 -->
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js" ></script>

3.写ajax请求

<script type="text/javascript"><!--
 $(function(){
  $("#bookName").autocomplete({
                 minLength:1,//输入一个字符则触发事件
                 autoFocus:true,
                 source:function(request,response){
                     $.ajax({
                         type:"POST",
                         url:"book_autoComplete.action",
                         dataType:"json",
                         data:{ bookName :  $("#bookName").val() },
                         success:function(json){
                             response($.map(json.autoSuggests,function(item){
                                return {
                                     label:item,
                                     value:item
                                 };
                             }));
                        }
                     });
               }
    });          
})
</script>

4.写action:book_autoComplete.action
该action方法从数据库中找到符合要求的集合，拿出指定字段

public String autoComplete(){
        System.out.println("bookAction+autocomplete"+bookName);
        bookList = bookService.bookVague(bookName);
        for(Book book : bookList){
            autoSuggests.add(book.getBookName());
        }                
        return "bookVague";
    }

autoSuggests为需要传送的json数据，此处采用注解方式

    //作为JSON数据返回，设置serialize=false
    @JSON(serialize=true)
    public List<String> getAutoSuggests() {
        return autoSuggests;
    }

注意一定要加的jar包
s-struts2-json-plugin-struts2-json-plugin-2.3.16.1.jar
c-commons-lang3-commons-lang3-3.1.jar
否则报错：
Caused by: java.lang.ClassNotFoundException: org.apache.commons.lang3.StringUtils

5.具体的 daoimpl 省略。