google 搜索引擎，ajax 自动补全搜索_综合

最近项目有用到一个类似百度搜索于是就把它记录下来，帮助需要用到的人

jsp 页面代码

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>职业搜索</title>
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="/resources/mobiscroll/js/career_Search.js" type="text/javascript"></script>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href="/resources/mobiscroll/css/career_Search.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="zong"><form class="form-horizontal" role="form" action="/user/selectDone" method="post" οnsubmit="return taskNew()"><input type="text" name="profession" size="15" class="inputclassid" οnkeyup="search()" id="customer" value="" />  <div id="suggest"></div> <div class="form-group" style="margin-top:5%; margin-left:0;width:100%;"><div class="col-sm-offset-2 col-sm-10"><button type="submit" class="btn btn-default btn-block btn-primary">完成</button></div></div></form>
</div>
</body>
</html>

主要还是Js 不过这个其实就是一个补全div，和上一篇的那个ajax上拉加载差不多

function search(){     var job=document.getElementById("customer").value;     //hide search     if(job==""){     document.getElementById('suggest').style.display='none';     return;     }else{     //display the suggest     document.getElementById('suggest').style.display='';     }     var suplist;  var info;  var url ="/user/customer";   $.post(url, {job : job},function(data){ var json = eval(data);var result="";   for(var i = 0 ; i<json.length ; i++){result+='<div class="suggest_link">' +json[i]+'</div>'}document.getElementById("suggest").innerHTML=result;  $(".suggest_link").on('click',function () {$("#suggest").css("display", "none");$("#customer").val($(this).html());}); });  
} function taskNew() {var profession=$('#customer').val();if (profession=="") {alert("请选职业!");return false;}
}

java后台这里小弟不知道为什么拼接的stringbuffer 在页面显示不出来。希望会的兄弟们能指点一下

        @ResponseBody@RequestMapping(value = "/customer", method = RequestMethod.POST)public String culist(String str) throws Exception {System.out.println(str);List<Profession> professions = taskService.selectprofession(str);/*StringBuffer strb = new StringBuffer("{\"supplier\":[");for (Profession profession : professions) {strb.append("{\"id\":\"" + profession.getId() + "\",\"name\":\"" + profession.getprofessionname() + "\"},");}strb.replace(strb.length() - 1, strb.length(), "");strb.append("]}");*/List list = new ArrayList();// 用list保存全部数据for (int i = 0; i < professions.size(); i++) {list.add(professions.get(i).getprofessionname());}String json = JSON.toJSONString(list); // list转jsonSystem.out.println(json);// 页面上return json;}

mybatis service层

/*** 根据传过来的值找职业*/@Overridepublic List<Profession> selectprofession(String str) {List<Profession> Profession = taskDao.selectprofession(str);return Profession;}

mybatis dao层数据库查询

/*** 根据str找职业内容* @param employerId* @return*/@Select("select * from  profession where name like CONCAT('%',#{0},'%')")@Results({@Result(property="id",column="id"), @Result(property="professionname",column="name") })  public List<Profession> selectprofession(String str);