Ajax实现站内搜索

最新推荐文章于 2021-08-05 20:42:49 发布

二狗学NLP

最新推荐文章于 2021-08-05 20:42:49 发布

阅读量235

点赞数

分类专栏： Ajax 文章标签： Ajax 站内搜索

本文链接：https://blog.csdn.net/qq_44783880/article/details/103171623

版权

Ajax 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">

				function searchWord(obj) {
					//1.获取输入框的输入内容
					var word=$(obj).val();
					//2.根据输入框内容去数据库模糊查询---List<Product>
					var context="";
					$.post(
					"${pageContext.request.contextPath}/searchWord"	,
					{"word":word},
					function(data) {
						if (data.length>0) {
							//3.将查询返回的商品名称写在showdiv
							for (var i = 0; i < data.length; i++) {
								context+="<div style='padding:5px;cursor:pointer' οnmοuseοver='overfn(this)' οnmοuseοut='outfn(this)' οnclick='clickDiv(this)'>"+data[i]+"</div>";
							}
							$("#showDiv").html(context);
							$("#showDiv").css("display","block");
						}
						
					},
					"json"
					);
				}
				
				function overfn(obj)

			    {

			       $(obj).css("background-color","#ccc");

			    }

			    function outfn(obj)

			    {

			       $(obj).css("background-color","#fff");

			    }

			    function clickDiv(obj)

			    {

			       $("#search").val($(obj).html());

			       $("#showDiv").css("display","none");

			    }
			</script>		
<script type="text/javascript">
/**
 * my_click和my_blur均是用于前台页面搜索框的函数
 */
//鼠标点击搜索框时执行
function my_click(obj, myid){
	//点击时，如果取得的值和搜索框默认value值相同，则将搜索框清空
	if (document.getElementById(myid).value == document.getElementById(myid).defaultValue){
	  document.getElementById(myid).value = '';
	  obj.style.color='#000';
	}
}
//鼠标不聚焦在搜索框时执行
function my_blur(obj, myid){
	//鼠标失焦时，如果搜索框没有输入值，则用搜索框的默认value值填充
	if (document.getElementById(myid).value == ''){
	 document.getElementById(myid).value = document.getElementById(myid).defaultValue;
	 obj.style.color='#999';
 }
}

/**
 * 点击搜索按钮执行的函数
 */
function search(){
	document.getElementById("searchform").submit();
}
</script>
</head>
<body>
<form class="navbar-form navbar-right" role="search">

        <div class="form-group" style="position: relative">

              <input id="search" type="text" class="form-control" placeholder="Search" onkeyup="searchWord(this)">

              <div id="showDiv" style="display:none;position: absolute;z-index:1000; background-color:#fff; width:196px; border:1px solid #ccc">

              </div>

       </div>

		<button type="submit" class="btn btn-default">Submit</button>
</form>

</body>
</html>

package web;

import java.io.IOException;
import java.sql.SQLException;
import java.util.ArrayList;

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

import domain.Product;
import net.sf.json.JSONArray;
import service.ProductService;

/**
 * Servlet implementation class searchWordServlet
 */
@WebServlet("/searchWord")
public class searchWordServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public searchWordServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		System.out.println("servlet start");
		response.setContentType("text/html,charset=utf-8");
		//获取查询关键字
		String word=request.getParameter("word");
		//查询所有关键字商品
		ProductService service=new ProductService();
		ArrayList<Object>pList=null;
		try {
			pList=service.findProductByWord(word);
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		//使用json的转换工具jsonlib将对象或者集合转成json格式的字符串
		JSONArray fromObject=JSONArray.fromObject(pList);
		String string=fromObject.toString();
		System.out.println(string);
		response.getWriter().write(string);
	}
	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

public ArrayList<Object> findProductByWord(String word) throws SQLException {
		// TODO Auto-generated method stub
		QueryRunner runner=new QueryRunner(DateSourceUtils.getDataSource());
		String sql="select * from products where name like ?limit 0,8 ";
		ArrayList<Object>pArrayList= (ArrayList<Object>) runner.query(sql, new ColumnListHandler<>("name"),"%"+word+"%");
		return pArrayList;
	}

二狗学NLP

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Ajax实现站内搜索

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %><!DOCTYPE html><html><head><ti...
复制链接

扫一扫

专栏目录