Ajax站内容搜索根据输入内容提示商品信息

最新推荐文章于 2022-03-05 14:15:29 发布

小猴子豆芽菜

最新推荐文章于 2022-03-05 14:15:29 发布

阅读量623

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/XU906722/article/details/79674206

Ajax 专栏收录该内容

3 篇文章

订阅专栏

该博客介绍如何利用Ajax技术实现站内搜索功能，根据用户输入内容动态提示相关商品信息，提供流畅的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

动态效果：

JSP：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ajax站内搜索提示</title>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
<script src="jquery-1.11.3.min.js" type="text/javascript"></script>
</head>

<body>
	<div class="container-fluid">
		<nav class="navbar navbar-inverse">
			<div class="container-fluid">
				<!-- Brand and toggle get grouped for better mobile display -->
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed"
						data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
						aria-expanded="false">
						<span class="sr-only">Toggle navigation</span> <span
							class="icon-bar"></span> <span class="icon-bar"></span> <span
							class="icon-bar"></span>
					</button>
					<a class="navbar-brand" href="#">首页</a>
				</div>

				<div class="collapse navbar-collapse"
					id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav">
						<li class="active"><a href="product_list.htm">手机数码<span
								class="sr-only">(current)</span></a></li>
						<li><a href="#">电脑办公</a></li>
					</ul>
					<form class="navbar-form navbar-right" role="search">
						<div class="form-group">
							<input id="searchId" type="text" class="form-control" placeholder="Search" onkeyup="searchWord(this)">
							<button type="submit" class="btn btn-default">Submit</button>
							<!-- 展示栏提示搜索内容 -->
						<div id="showId" style="position:absolute;z-index:1000;width:179px;border:1px solid #ccc;background:#fff">
						</div>
						</div>
					</form>
					<script type="text/javascript">
					
					//当鼠标移动到选项上面时颜色改变
					function overFn(obj){
						$(obj).css("background","#DBEAF9");
					}
					function outFn(obj){
						$(obj).css("background","#fff");
					}
					
					function clickFn(obj){
						$("#searchId").val($(obj).html());
						$("#showId").css("display","none");
					}
					
						function searchWord(obj){
							//1. 获取用户输入的内容
							var word=$(obj).val();
							//2. 根据输入的内容去数据库模糊查询
							var content="";
							$.post(
								"${pageContext.request.contextPath}/searchWord", //请求地址
								{"word":word}, //提交的数据
								function(data){ //请求成功后执行的方法
									//3.将查询的商品信息展示在输入框下面 
									if(data.length>0){
										//["小米 4c 标准版","小米 红米2A 增强版 白色","小米（MI）7.9英寸平板"]
										//遍历数组分别将数组中的商品信息展示在提示栏
										for(var i=0;i<data.length;i++){
											content+="<div style='padding:5px;cursor:pointer' onclick='clickFn(this)' onmouseover='overFn(this)' onmouseout='outFn(this)'>"+data[i]+"</div>";
										}
											$("#showId").html(content);
											$("#showDiv").css("display","block");
									}
								},
								"json" //相应数据的类型
							);
							
						}
					</script>
				</div>
			</div>
		</nav>
	</div>

</body>

</html>

java：

package ajax;

import java.io.IOException;
import java.security.interfaces.RSAKey;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

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

import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.ColumnListHandler;

import com.google.gson.Gson;

import utils.DataSourceUtils;

public class SearchWord extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//1.获取用户输入内容
		String word = request.getParameter("word");
		//2.根据输入内容模糊查询商品
		QueryRunner runner = new QueryRunner(DataSourceUtils.getDataSource());
		String sql = "select * from product where pname like ? limit 0,8";
		List<Object> products=new ArrayList<Object>();
		try {
			products = runner.query(sql, new ColumnListHandler("pname"), "%"+word+"%");
		} catch (SQLException e) {
			e.printStackTrace();
		}
		//3.将查询结果集转换成json格式并返回给前台
		Gson gson=new Gson();
		String json = gson.toJson(products);
		response.setContentType("text/html;charset=UTF-8");
		response.getWriter().write(json);;
	}

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