模糊查询自动补全

最新推荐文章于 2023-07-01 15:23:08 发布

陈福国

最新推荐文章于 2023-07-01 15:23:08 发布

阅读量1k

点赞数

分类专栏： WEB板块

本文链接：https://blog.csdn.net/qq_45112637/article/details/97105724

版权

WEB板块专栏收录该内容

20 篇文章 1 订阅

订阅专栏

实现目的：
通过搜索框输入关键字下面可以自动提醒补全和关键字有关的内容

实现步骤思想：
1. 建包 untis domain web service dao
2. 在web下面的WEB-INF里面建立lib包导入需要的jar包
在这里插入图片描述

1. 登录页面进行操作

JavaScript 键盘事件有以下3种
keydown
键盘按键按下（如果按着不放，会持续触发该事件），可以捕获组合键。
keypress
键盘非功能按键按下（在keydown之后触发，如果按着不放会持续触发该事件），只能捕获单个键。
keyup
键盘按键弹起，可以捕获组合键。

找到搜索框设置id 绑定键盘事件此处绑定onkeyup，设置id 方便后面获得参数
绑定键盘事件后在下面设置div 设置div格式以便后面弹出补全的内容设置id 方便后面获取
去进行相关操作获得弹出div对象设置变量，获得键盘输入内容使用$("#id").val 设置变量接收
设置如果变量键盘输入内容是空则隐藏弹出部分且返回
使用ajax 设置路径访问参数以及回调函数函数包括设置字段名在这里因为servlet层返回了一个数组类型的json，所以需要遍历用到 each()方法，最后设置返回值类型 json【使用ajax用来向web层传输用户搜素框输入的数据】

2. 在web层建立servlet

获得客户端提交的商品名
调用业务层传递商品名
获取查询的结果 List集合
集合转json 格式
响应客户端

3.service层

新建dao层传值方法

4.dao层查询

使用QueryRunner
写sql语句模糊查询
注意：
%：表示任意0个或多个字符。可匹配任意类型和长度的字符，若查询和“三有关的所有内容”，请使用两个百分号（%三%）表示。
返回查询内容

代码如下：

js首页查询部分：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<!-- 登录 注册 购物车... -->
<div class="container-fluid">
	<div class="col-md-4">
		<img src="img/logo2.png" style="width:140px;height:70px "/>
	</div>
	<div class="col-md-5">
		<img src="img/header.png" />
	</div>
	<div class="col-md-3" style="padding-top:20px">
		<ol class="list-inline">
			<li><a href="login.jsp">登录</a></li>
			<li><a href="register.jsp">注册</a></li>
			<li><a href="cart.jsp">购物车</a></li>
			<li><a href="order_list.jsp">我的订单</a></li>
		</ol>
	</div>
</div>
<script type="text/javascript">
	function search() {
		var proID = $("#proID");
		var word = $("#word").val();

		//判断如果输入框内输入的除了空格是空的  则自动补全隐藏
		if (word.trim()==""){
		    proID.hide();
		    return;
		}

		//ajax获取连接  数据
		$.get(
		    //访问路径
			"/test3_723/search",
			//访问参数
			"word="+word,
			//回调函数 取名  显示自动补全部分
			function (data) {
				proID.show();

				var s="";
				//组合名字
				$.each(data,function (index,element) {
					s+="<div onmouseover='over(this)' onmouseout='out(this)'>"+element.pname+"/<div>";
                });
				proID.html(s);

            },
				//返回值类型
				"json"
            );
    }

    function over(obj) {
		$(obj).css("color","red");
    }
    function out(obj) {
		$(obj).css("color","yellow");
    }

</script>

<!-- 导航条 -->
<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>
					<li><a href="#">电脑办公</a></li>
					<li><a href="#">电脑办公</a></li>
				</ul>
				<form class="navbar-form navbar-right" role="search">
					<div class="form-group">
						<input type="text" class="form-control" placeholder="Search" id="word" onkeyup="search()">
					</div>
					<button type="submit" class="btn btn-default">Submit</button>
					<div id="proID" style="border: 1px solid #606060; margin-top: 5px; position: absolute; color: #1d1d1d;z-index: 5;width: 180px;">

					</div>
				</form>
			</div>
		</div>
	</nav>
</div>

web层 servlet部分：

package cn.cfg.web;

import cn.cfg.domain.Product;
import cn.cfg.service.ProductService;
import com.google.gson.Gson;

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 java.io.IOException;
import java.util.List;

@WebServlet("/search")
public class SearhServlet extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //获取关键字
        String word = request.getParameter("word");
        List<Product>list = new ProductService().search(word);

        //把list转换成json
        Gson gson = new Gson();
        String json = gson.toJson(list);

        //响应回浏览器
        response.setContentType("text/html;charset=utf-8");
        response.getWriter().write(json);
    }

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

}

service层

package cn.cfg.service;

import cn.cfg.dao.ProductDao;
import cn.cfg.domain.Product;

import java.sql.SQLException;
import java.util.List;

public class ProductService {
    public List<Product> search(String word) {
        List<Product>list = null;
        try {
            list = new ProductDao().search(word);
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return list;
    }
}

dao层：

package cn.cfg.dao;

import cn.cfg.domain.Product;
import cn.cfg.untils.C3P0Utils;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanListHandler;

import java.sql.SQLException;
import java.util.List;

public class ProductDao {
    public List<Product> search(String word) throws SQLException {
        QueryRunner qr = new QueryRunner(C3P0Utils.getDataSource());
        //编写sql语句
        String sql="select * from product where pname like ?";
        return qr.query(sql,new BeanListHandler<Product>(Product.class),"%"+word+"%");
    }
}

效果图：

在这里插入图片描述

陈福国

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
模糊查询自动补全

实现目的：通过搜索框输入关键字下面可以自动提醒补全和关键字有关的内容实现步骤思想：1. 建包 untis domain web service dao2. 在web下面的WEB-INF里面建立lib包导入需要的jar包1. 登录页面进行操作JavaScript 键盘事件有以下3种keydown键盘按键按下（如果按着不放，会持续触发该事件），可以捕获组合键。keypress...
复制链接

扫一扫