ajax+JQuery实现类似百度智能搜索框
最近再学习ajax,上课老师让我们实现一个类似百度首页实现搜索框的功能,刚开始做的时候没有一点头绪,查阅大量网上的资源后,发现之前的与我们现在的有些区别,所以在此写出来,希望能对大家有所帮助.
下面先展示下效果图:(ps:图片中的文字是参考的,不具有任何的攻击意义)
项目的目录结构:
一:首先是login.jsp页面 需要注意的是我是通过js的类库(Jquery)封装的ajax,需要在webcontent下面导入jquery jar包,代码如下:
- <%@ 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>Insert title here</title>
- <style type="text/css">
- #shuru {
- width: 500px;
- height: 35px;
- border: 1px solid #c3c3c3;
- }
- #button {
- width: 85px;
- height: 37px;
- border: 1px solid #c3c3c3;
- }
- #box {
- width: 500px;
- border: 1px solid #c3c3c3;
- margin-left: -85px;
- display: none;
- text-align: left
- }
- </style>
- <script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
- <script type="text/javascript">
- $(function() {
- //0键盘抬起事件 通过div中的ID获取input输入框
- $("#shuru").keyup(
- function() {
- $("#box").empty();
- //1 获取输入框的值
- var shuru = $(this).val().trim();
- //alert(shuru);
- //判断用户输入的是否为空,如果为空不发送ajax
- if (shuru != null && shuru != "") {
- //2 发送ajax
- $.post("loginServlet", "shuru=" + shuru, function(
- result) {
- //alert(result);
- if (result == null || result == "") {
- $("#box").css("display", "none");
- } else {
- //遍历结果集
- $.each(result, function(index, data) {
- //alert(index+""+data.message)
- //显示在隐藏div上面
- $("#box").append(
- "<div>" + data.message + "</div>");
- $("#box").css("display", "block");
- });
- }
- }, "json");
- } else {
- $("#box").css("display", "none");
- }
- });
- })
- </script>
- </head>
- <body>
- <center>
- <div>
- <img alt="" src="img/bd_logo1.png" width="310" height="110">
- <div>
- <input type="text" id="shuru" name="shuru"><input
- type="button" id="button" value="百度一下">
- <div id="box"></div>
- </div>
- </div>
- </center>
- </body>
- </html>
二 为LoginServlrt.servlet 在 servlet包中 代码如下:
- package com.wdh.servlet;
- import java.io.IOException;
- import java.util.List;
- 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 com.alibaba.fastjson.JSON;
- import com.wdh.bean.School;
- import com.wdh.dao.SchoolDao;
- import com.wdh.dao.SchoolDaoImpl;
- /**
- * Servlet implementation class LoginServlet
- */
- @WebServlet("/loginServlet")
- public class LoginServlet extends HttpServlet {
- private static final long serialVersionUID = 1L;
- protected void doGet(HttpServletRequest request, HttpServletResponse response)
- throws ServletException, IOException {
- // 1获取请求参数
- String shuru = request.getParameter("shuru");
- // 2处理业务
- SchoolDao schoolDao = new SchoolDaoImpl();
- List<School> list = schoolDao.queryMore(shuru);
- System.out.println(list);
- // 将list集合转成 json字符串
- String json = JSON.toJSONString(list);
- // 3 响应
- response.getWriter().write(json);
- }
- protected void doPost(HttpServletRequest request, HttpServletResponse response)
- throws ServletException, IOException {
- // TODO Auto-generated method stub
- doGet(request, response);
- }
- }
三,连接数据库使用JDBC连接的数据库
3在BasicDao.java中是封装好的对数据库的增删改查,创建实现类接口,继承basicDao,实现查询语句即可,在数据库操作语言里面,实现模糊查询,代码如图:
这是第一次写博客,写的不好,希望大家包容,我也是希望通过这种方式,来学习,进步,欢迎大家,留言讨论
ajax+JQuery实现类似百度智能搜索框的更多相关文章
- Jquery实现类似百度的搜索框
最近工作中需要做一个搜索框,类似百度的搜索框,需要达到两个功能: 1.输入关键字,展示匹配的下拉列表 2.选择匹配的项后查出相关内容 一般电商网站中也经常用到该搜索条,首先分析功能实现,输入关键字马上 ...
- 淘宝购物车页面 智能搜索框Ajax异步加载数据
如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...
- 分享一个jquery写的类似于百度的搜索框,(可动态配置,可单列或者table格式,可填充数据)
需求:类似于百度的搜索框,可配置,可单列可table格式,可填充数据.页面可多次使用,简单,易用. 想法:使用jquery,css,ajax,前台调用,后台返回json数据. jquery代码: va ...
- js/jQuery实现类似百度搜索功能
一.页面代码:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. ...
- jQuery+HTML5弹出创意搜索框层
效果体验:http://hovertree.com/texiao/jquery/26/ 本效果适用于移动设备,可以使用手机等浏览效果. 代码下载:http://hovertree.com/h/bjaf ...
- 使用jQuery和CSS3生成的搜索框变形全屏搜索效果
在线演示 本地下载 使用jQuery和CSS3过渡变形效果生成的一个搜索框变形效果实现,可以帮助你更好利用页面格式和内容.实验性质的代码,请大家在产品环境里自己修改使用!
- js 百度云搜索框
// ==UserScript==// @name 百度云插件+APIKey// @namespace // @version 5.0.2.1// @description 在百度云网盘的页面添加一个 ...
- AJAX实现类似百度的搜索提示,自动补全和键盘、鼠标操作
<script type="text/javascript"> $(document).ready(function(){ var highlightIndex = - ...
- 使用jqueryUI和corethink实现的类似百度的搜索提示
代码:http://download.csdn.net/detail/u012995856/9676845 效果: 目录: 这里是以corethink模块的形式,只需要安装上访问 index.php? ...
随机推荐
- [NOIP2003] 传染病控制题解
问题 F: [NOIP2003] 传染病控制 时间限制: 1 Sec 内存限制: 128 MB 题目描述 [问题背景] 近来,一种新的传染病肆虐全球.蓬莱国也发现了零星感染者,为防止该病在蓬莱国大范 ...
- Java中什么是type,它和class有什么关系?
看代码总能遇到关键字--type,对于type的概念不明白.翻译水平也有限,所以贴几个地址.自己先看着. https://stackoverflow.com/questions/16600750/di ...
- Jmeter自定义Java请求开发
一.本次实验目的 IDEA新建maven项目,使用java开发自定义jmeter的请求. 本次开发使用的代码,会百度云分享给大家. 二.本次实验环境 Idea 2017.02 Jmeter 5.1.1 ...
- Unity3D 学习笔记一
安装Unity3D 环境 1 进入Unity3D 官网 http://unity3d.com/cn/ 找到获取 Unity 进去之后点击下载 2.下载完成之后进行安装,由于新的版本采用在线安装方式所以 ...
- 「PowerBI」分析服务多维数据结构重回关系数据库的一大绝招
在过往Excel催化剂定位的轻量级Excel+PowerBIDesktop的解决方案中,已经做过了近乎完美的PowerBIDesktop数据模型数据导出到Excel工作表的应用,这也是个人版数据应用的 ...
- F#周报2019年第29期
新闻 ML.NET 1.2发布,包含Model Builder升级 NuGet.org上现在显示GitHub的使用情况 微基准测试设计准则 为线程添加mono.wasm支持 Haskell--经验总结 ...
- [leetcode] 103 Binary Tree Zigzag Level Order Traversal (Medium)
原题链接 题目要求以"Z"字型遍历二叉树,并存储在二维数组里. 利用BFS,对每一层进行遍历.对于每一层是从左还是从右,用一个整数型判断当前是偶数行还是奇数行就可以了. class ...
- 【干货干货】configtxlator 工具介绍
这一章我们对configtxlator做一个解说. 1, configtxlator 他是什么,有什么用? configtxlator 官方说明是用于生成Hyperledger结构通道配置的实用程序: ...
- SQLyog 破解版
百度云:链接:http://pan.baidu.com/s/1eSMEzIE 密码:ubi2
- C# 怎样将DateTime类型进行日期的加减
C#中 DateTime类型有封装好的函数 例如: //将当前时间转换为指定格式的DateTime类型 DateTime dt=DateTime.Parse(DateTime.Now.ToString ...