简单搜索框

最新推荐文章于 2021-07-24 17:10:20 发布

K丨T

最新推荐文章于 2021-07-24 17:10:20 发布

阅读量317

点赞数

分类专栏：简单搜索框文章标签：搜索框工具类

简单搜索框专栏收录该内容

1 篇文章 0 订阅

订阅专栏

根据视频编写的简单搜索框，使用jquery+ajax实现的简单搜索框

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript"
    src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
    $(function() {
        //文本框keyup的时候发送ajax
        $("#tid")
                .keyup(
                        function() {
                            //获取文本框的值
                            var $value = $(this).val();

                            //内容为空的时候不发送ajax
                            if ($value != null && $value != '') {
                                //清空div
                                $("#did").html("");
                                
                                //写入自己的项目路径和servlet
                                $.post("/day08/search","kw=" + $value,function(d) {
                                  //不为空的时候切割字符串
                                   if (d != '') {
                                    var arr = d.split(",");
                                    $(arr).each(function(){
                                      //alert(this);
                                     //可以将每一个值放入一个div 将其内部插入到id为did的div中
                                    $("#did").append($("<div style='text-align:left;'>"+ this+ "</div>"));
                            });
                            //将div显示
                            $("#did").show();
                                            }
                                        });

                            } else {
                                //内容为空的时候 将div隐藏
                                $("#did").hide();
                            }
                        });
    })
</script>
</head>

<body>
    <center>
        <div>
            <h2>书籍搜索</h2>
            <div width="150px">
                <input type="text" name="kw" id="tid"> <input type="button"
                    value="搜索">
            </div>
            <div id="did"
                style="border: 1px  solid black;width: 143px;position: relative;
left: -25px;display: none"></div>
        </div>
    </center>
</body>
</html>

SearchServlet.java

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.SQLException;
import java.util.List;

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

import com.DC.service.SearchKwService;
public class SearchServlet extends HttpServlet {

	protected void service(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		// 设置编码
		response.setContentType("text/html;charset=utf-8");
		request.setCharacterEncoding("utf-8");
		// 设置查询
		String kw = request.getParameter("kw");

		// 接受查询数据
		List<Object> list = null;
		try {
			list = new SearchKwService().findKw(kw);
		} catch (SQLException e) {
			e.printStackTrace();
		}

		// 判断链表是否为空
		if (list != null && list.size() > 0) {
			// 将链表中的值转换成字符串
			String s = list.toString();

			// 链表转换成字符会有前后中括号，所以切割中间部分；
			s = s.substring(1, s.length() - 1);
			// System.out.println(s);
			response.getWriter().println(s);
		}

	}

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

	}

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

}

SearchService.java

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

import com.DC.dao.SearchKwDao;

public class SearchKwService {
	
	//查找字符
	public List<Object> findKw(String kw) throws SQLException {
		return new SearchKwDao().findKw(kw);
	}

}

SearchDao.java

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

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

import com.DC.utils.DataSourceUtils;

public class SearchDao {

	public List<Object> findKw(String kw) throws SQLException {
		QueryRunner qr = new QueryRunner(DataSourceUtils.getDataSource());
		
		//限制5个搜索数，设置要查找的表和列
		String sql = "select * from XXX where xx like ? limit 5";
		
		//ColumnListHandler:将某列的值封装到List集合中，例如一列name属性等
                //采用模糊查找
		return qr.query(sql, new ColumnListHandler("kw"), "%"+kw+"%");
	}

}

K丨T

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单搜索框

根据视频编写的简单搜索框，使用jquery+ajax实现的简单搜索框&lt;%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%&gt;&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;&lt;html&am
复制链接

扫一扫

专栏目录