您的位置：首页 > 编程语言 > Go语言

google 搜索引擎，ajax 自动补全搜索

2016-11-03 14:12 411 查看

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

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>

<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>

<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>

主要还是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转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);

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航