题目

搜索框打字后出现推荐匹配相近字符

实现

输入字符后,后台数据库查询是否有最近相似热搜字符,查到有便出现在下拉框,公网页浏览者挑选

查询没有,就不显示

代码

jsp前台网页

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
<!--
.STYLE2 {
	font-size: 72px;
	font-family: "宋体";
	color: #CC6600;
	font-style: italic;
	font-weight: bold;
}
-->
</style>
</head>
<body>
	<div id="divSearch" align="center">
	  <p align="left">
	    <input name="search" type="text" id="search" size="40" height="20">
	    <input name="submit" type="submit"  value="搜索" size="10" height="10">
        </p>
</div >	
<div id="tirps"  style="display:none; border: 1px solid grey; backgroud-color:grey;width:170px"  >	</div>
</body>
<script type="text/javascript" src="${pageContext.request.contextPath }/MyAjax.js"></script>
<script type="text/javascript">
window.onload= function(){
	var searchElement=document.getElementById("search");
	//获取下拉框tirps的对象
	var trips=document.getElementById("tirps");

	  //给输入框注册按键弹起事件
         searchElement.onkeyup = function(){
		var name=this.value;

		if(name==""){
			trips.style.display="none";
			return;
		}		
		//获取XMLHttpRequest对象
			var xhr=getXMLHttpRequest();

		//回调函数
		xhr.onreadystatechange=function(){
			if(xhr.readyState==4){
				if(xhr.status==200){
					var xrc=xhr.responseText;//获取服务器返回的值

					if( xrc==""){
						return;
					}	
					//返回的数据以“,”区分字符串,例如,davis,小王,linda
					var result= xrc.split(",");//result:{davis","小王","linda}
					var childDiv="";
					for(var i=0;i<result.length;i++){
						childDiv +="<div onclick='writerText(this)' onmouseover='changeBackgroudColor(this)' onmouseout='recoverBackgroudColor(this)'>" + result[i]+ "</div>" ;
					}
					//把childDiv放到trips对象中
					trips.innerHTML=childDiv;
					//将列表显示
					trips.style.display="block";
				}
			}
			
		}

		xhr.open("get","${pageContext.request.contextPath }/search?search=" + name);
		xhr.send(null);
		
	}
}
//将文本填充到收索框
function writerText(trips){
	//获取搜素框对象
	var searchElement=document.getElementById("search");
	//将选中的trips值添加到搜索框中
	searchElement.value=trips.innerHTML;
	//将下拉框隐藏
	trips.parentNode.style.display="none"
}
//鼠标悬浮时改变背景色
function changeBackgroudColor (trips){
	trips.style.backgroundColor="grey";
}
//鼠标悬浮时改变背景色
function recoverBackgroudColor (trips){
	trips.style.backgroundColor="";
}
</script>
</html>

ajax.js文件

//获取XMLHttpRequest对象
function getXMLHttpRequest(){
	var xmlHttp;
	//IE7+,FireFox,Chrome,Opera,Safari
	if(window.XMLHttpRequest){
		xmlHttp = new XMLHttpRequest();
	}else{//ie6,ie5
		xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	
	return xmlHttp;
}

servlet文件

package ajax;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * 查询ajax传过来的数据
 */
@WebServlet("/search")
public class search extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
   
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//获取ajax用户输入值
		String search=request.getParameter("search");
		System.out.println(search);
		//根据ajax用户输入值去查询数据库,这里简化,手动编写一个list结果集
		List<String> result=new ArrayList<>();
		result.add("d1");
		result.add("d2");
		result.add("d3");
		result.add("d4");
		result.add("d5");
		
		//将集合中的数据转换为字符串返回到页面
		String xrc="";
		//如果用户输入的内容以d开头的话,就将数据返回
		if(search.startsWith("d")) {
			for(int i=0; i<result.size();i++) {
				if(i>0) {
					xrc +=",";
				}
				xrc +=result.get(i);
			}
		}
		System.out.println(xrc);
		//将数据响应到客户端
		response.getWriter().write(xrc);
		}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}