springmvc实现自动补全功能

最近在做一个分享圈的项目，采用是ssm实现,于是在前端搜索框中实现一个类似百度的自动补全功能的搜索框来进行查询。

思路：前端把数据传到后台，后台用springmvc接收数据，之后调用相应的服务接口，执行数据访问层dao层的方法，获取到要找的数据，返回给前端，前端对该数据列表进行显示。

自动补全功能限制查询结果数为5条，效果如下：

实现步骤：

前端用了jquery.ui的一个autocomplete插件来实现显示效果，后端采用springmvc来接受请求，并返回数据。

1.下载jquery-ui包，解压：

2.在前端页面引用其的js（必须用）,css(可以不用其css,用自己写的也行）

<div class="widget widget_search">
    <form class="navbar-form" action="<%=request.getContextPath()%>/user/selectPage" method="post">
        <div class="input-group">
            <input type="hidden" name="user_id" id="user_id" value="${page.userid}"/>
            <input type="hidden" name="other_id" id="other_id" value="${page.otherid}"/>
            <input type="text" name="keyWord" id="keyword" value="${page.keyWord}" class="form-control" size="35" placeholder="请输入关键字" maxlength="15" autocomplete="off">
            <span class="input-group-btn">
                <select name="keyType" id="key_type" class="btn btn-default btn-search">
                    <option value="userid" <c:if test="${page.keyType=='userid'}">selected="selected"</c:if> >userid</option>
                     <option value="content" <c:if test="${page.keyType=='content'}">selected="selected"</c:if> >content</option>
                </select>
            </span>
            <span class="input-group-btn">
          <button class="btn btn-default btn-search" name="search" type="submit" onclick="search()">搜索</button>
      </span>
        </div>
    </form>
</div>

<script src="<%=request.getContextPath()%>/public/content/jqueryui/js/jquery.js"></script>
<script src="<%=request.getContextPath()%>/public/content/jqueryui/js/jquery-ui.js"></script>
<script type="text/javascript">

    $( "#keyword" ).autocomplete({
        source: function( request, response ) {
            $.ajax({
                type:"post",
                url: "<%=request.getContextPath()%>/user/getserchinfo",//后端接受的路径
                async:false,//同步的方式
                dataType: "json",
                data:{
                    keyWord: request.term,//传搜索框输入的数据
                },
                success: function( data ) {
                    response( $.map( data, function( item ) {
                        return {   //lable为下拉列表显示数据源。value为选中放入到文本框的值，这种方式可以自定义显示
                            lable:item.userid,  //固有属性
                            value: item.userid, //选中后填充到下拉框的值
                            id: item.userid  //自定义属性
                        }
                    }));
                }
            });
        },
        minLength: 1,//表明在搜索框输入几个字符才触发操作，后台springmvc才执行相应操作返回数据列表
        select: function( event, ui ) { //移动键盘上下键，自动将下拉列表的数据放入到文本框，不过不写这个配置也是可以的，默认就行
            $("#keyword").val(ui.item.userid);
        }
    });
</script>

注：记得把async:false,写上。要不然url传不到后台。

springmvc接受数据：

/**
 * 下拉补全列表的数据
 */

@RequestMapping(value = "/getserchinfo")
@ResponseBody
public List<Content> getSerchInfo(Page page) {
    System.out.println("自动补全start：");
    System.out.println("stainfo:"+page.toString());
    List<Content>list;
    //判断是否有值
    if (page.getKeyWord() != null && page.getKeyWord().length() != 0) {
        list=contentService.selectSingle(page);
        for (Content content:list){
            System.out.println(content.toString());
        }
        return list;

    }
    return null;
}

我是把数据列表的一些属性，比如页数，行数，模糊查询的参数封装在Page类中。

Page类主要用来处理分页的操作。

/**
 * 处理分页
 * Created by ASUS on 2018/5/7
 *
 * @Authod Grey Wolf
 */

public class Page implements Serializable {


    //当前页
    private Integer page=1;
    //页大小
    private Integer rows=5;
    // 总记录 数
    private Integer totalRecord;
    //总页数
    private Integer totalPage;
    //关键字类型
    private String keyType;
    //查询关键字
    private String keyWord;
    //开始记录位置
    private Integer start;
    //用户id
    private String userid;
    //其他用户id
    private String otherid;

    public String getKeyType() {
        return keyType;
    }

    public void setKeyType(String keyType) {
        this.keyType = keyType;
    }

    public String getOtherid() {
        return otherid;
    }

    public void setOtherid(String otherid) {
        this.otherid = otherid;
    }

    public String getUserid() {
        return userid;
    }

    public void setUserid(String userid) {
        this.userid = userid;
    }

    public Integer getPage() {
        return page;
    }

    public void setPage(Integer page) {
        this.page = page;
    }

    public Integer getRows() {
        return rows;
    }

    public void setRows(Integer rows) {
        this.rows = rows;
    }

    public Integer getTotalRecord() {
        return totalRecord;
    }

    public void setTotalRecord(Integer totalRecord) {
        this.totalRecord = totalRecord;
    }

    public Integer getTotalPage() {
        totalPage=(totalRecord-1)/rows+1;
        return totalPage;
    }

    public void setTotalPage(Integer totalPage) {

        this.totalPage = totalPage;
    }

    public String getKeyWord() {
        return keyWord;
    }

    public void setKeyWord(String keyWord) {
        this.keyWord = keyWord;
    }

    public Integer getStart() {
        start=(page-1)*rows;
        return start;
    }

    public void setStart(Integer start) {

        this.start = start;
    }

    public Page() {
    }

    public Page(Integer page, Integer rows, Integer totalRecord, Integer totalPage, String keyType, String keyWord, Integer start, String userid, String otherid) {
        this.page = page;
        this.rows = rows;
        this.totalRecord = totalRecord;
        this.totalPage = totalPage;
        this.keyType = keyType;
        this.keyWord = keyWord;
        this.start = start;
        this.userid = userid;
        this.otherid = otherid;
    }

    @Override
    public String toString() {
        return "Page{" +
                "page=" + page +
                ", rows=" + rows +
                ", totalRecord=" + totalRecord +
                ", totalPage=" + totalPage +
                ", keyType='" + keyType + '\'' +
                ", keyWord='" + keyWord + '\'' +
                ", start=" + start +
                ", userid='" + userid + '\'' +
                ", otherid='" + otherid + '\'' +
                '}';
    }
}

由于我是自动补全的是用户id,所以mapper的sql语句：

<!-- 自动补全-->
<select id="selectSingle" parameterType="net.stxy.one.model.Page" resultMap="BaseResultMap" >
  select  DISTINCT  userid
  from content
  <where>
    <if test="keyWord!='' and keyWord!=null ">
      AND userid like '%' #{keyWord} '%'
    </if>
     limit #{start},#{rows}
  </where>
</select>

我的座右铭：不会，我可以学；落后，我可以追赶；跌倒，我可以站起来；我一定行。