用jquery实现百度搜索提示框

最新推荐文章于 2022-06-25 21:48:24 发布

qq_42799000

最新推荐文章于 2022-06-25 21:48:24 发布

阅读量790

点赞数

本文链接：https://blog.csdn.net/qq_42799000/article/details/82633852

版权

jquery百度提示框

创建表单页面

<center>标签，可以将包含在此标签的标签数据都剧中显示
在style标签内有一个position:relative;left:-43px;，作用是将此标签的内容向左偏移43px像素


源码：
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>百度一哈</title>
//引入jquery
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
//引入有自己逻辑编写的js
<script type="text/javascript" src="js/baidu.js"></script>
</head>
<body>
//剧中显示数据
<center>
<h2>百度一下</h2>
//文本输入框
<input type="text" id="word" style=" width: 600px;height: 50px" name="bdword">
//按钮，没有实际作用
<input type="button" value="百度一下" style="width: 80px ; height: 50px ;border: 1px">
//用来显示提示的相关数据
<div id="baiduDIV"  style="position:relative;left:-43px; height: 300px;width: 600px;border: 1px solid blue;display: none"></div>
</center>

</body>
</html>

完成js逻辑代码

//$function(){});这是标准的格式
$(function(){
    //创建一个事件，当按键弹起的时候被触发
    $("#word").keyup(function () {
    //获取到id为word的值
        var word=$("#word").val();
    //判断word的值，是否为空
        if(word==""){
        //为空就隐藏其id为baiduDIV的标签
                $("#baiduDIV").hide();
            }else{
            //word不为空就执行post请求，传word的值到后端，并执行function
                $.post("/checkUsername/baiduservlet",{word:word},function(data,status){
                //这个data只是后台数据传过来的值的名字，叫什么无所谓，只要是在一个位置就行，同理status表示状态码
                //将data数据以html格式写进div然后进行解析
                $("#baiduDIV").html(data);
                //显示div方框
                $("#baiduDIV").show();
            });
    });
});

创建servlet，dao等后端类

创建servlet

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            try {
                String word=request.getParameter("word");
                checkdao cd=new checkImpl();
                List<word> words = cd.findword(word);
                //页面跳转，其实是将跳转的页面的数据上传到前端
                request.getRequestDispatcher("list.jsp").forward(request, response);        
                request.setAttribute("words", words);
            } catch (SQLException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
    }

创建dao

public List<word> findword(String word) throws SQLException {
//没有释放的工具
        QueryRunner queryRunner=new QueryRunner(new ComboPooledDataSource());
        return  queryRunner.query("select * from baidu where word like ?" , new BeanListHandler<word>(word.class),word+"%");
    }

对上传数据进行加工的表单

    pageEncoding="UTF-8"%>
    <%@page isELIgnored="false"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<table style="width: 100%">
    <c:forEach items="${words }" var="wordBean">
        <tr>
            <td>${wordBean.word} aq</td>
        </tr>
    </c:forEach>
</table>

注意事项

sql语句中模糊查找的时候，传的值
‘%a%‘表示要查找包含此数据的值’a%‘表示要查找以a开头的数据，以此类推

jquery的 $(“#”)这个表达式的意思式documentElementsById（”#”）$ ("#").val(),,,,,, $(“#”).text(),,,,,,,,$ (“#”).html(),,,,三个的区别：：：：第一个是表示对标签内有value的值进行操作：：：：：；第二个是，对任何可以显示数据的标签的数据进行操作：：：第三个是在第二给基础上升级为，操作的数据可以是进行html的解析

qq_42799000

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用jquery实现百度搜索提示框

jquery百度提示框创建表单页面&lt;center&gt;标签，可以将包含在此标签的标签数据都剧中显示在style标签内有一个position:relative;left:-43px;，作用是将此标签的内容向左偏移43px像素源码：&lt;%@ page language="java" contentType="text/html; charset=UTF-8" ...
复制链接

扫一扫