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

最新推荐文章于 2023-04-05 23:11:04 发布

故事说到这里

最新推荐文章于 2023-04-05 23:11:04 发布

阅读量586

点赞数

分类专栏： java 文章标签： google 搜索引擎 ajax 自动补全搜索搜索引擎谷歌搜索

本文链接：https://blog.csdn.net/qq_34469943/article/details/53021041

版权

java 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

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

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转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);