您的位置：首页 > 其它

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

2018-03-24 00:39 671 查看

动态效果：

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

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

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

标签： 站内搜索搜索提示

相关文章推荐

新的分享

章节导航