google 搜尋引擎，ajax 自動補全搜尋
阿新 • • 發佈：2019-01-27
最近專案有用到一個類似百度搜索 於是就把它記錄下來，幫助需要用到的人
jsp 頁面程式碼
主要還是Js 不過這個其實就是一個補全div，和上一篇的那個ajax上拉載入差不多<%@ 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" onsubmit="return taskNew()"> <input type="text" name="profession" size="15" class="inputclassid" onkeyup="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>
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轉json System.out.println(json); // 頁面上 return json; }
mybatis service層
/**
* 根據傳過來的值找職業
*/
@Override
public 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);