JS+Ajax实现百度智能搜索框
首先浏览实现后的结果，输入一个a之后会出现包含a的下拉列表，当我们点击某一个的时候，搜索框中就会出现点击的值。实现所需要的主要是ajax+js。
前端search.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<html>
<head>
<title>Insert title here</title>
<script src="js/jquery.min.js"></script>
<style type="text/css">
*{
margin: 0 auto;
padding: 0;
}
li{
margin:0;
height: 20px;
width: 200px;
list-style: none;
}
/* #c li:HOVER{
background-color: #F9F9F9;
} */
.onmouse{
background-color: #F9F9F9;
}
.outmouse{
background-color:white;
}
#contain{
width: 50%;
}
</style>
<!-- jquery -->
<script type="text/javascript">
var xmlHttp;
function getMoreContents() {
var content=document.getElementById("keyword");
if(content.value==""){
ClearContent();
return;//如果不设置，传到后台的是空值，所有的值都会被输出
}
xmlHttp=creatXMLHttp();
//alert(xmlHttp);
//要给服务器发送数据
var url="searchServlet?keyword="+escape(content.value);
xmlHttp.open("GET",url,true);
xmlHttp.onreadystatechange=callback;
xmlHttp.send(null);
}
//获取XMLHttp对象
function creatXMLHttp() {
var xmlHttp;
if(window.XMLHttpRequest){
xmlHttp=new XMLHttpRequest();
}
if(window.ActiveXObject)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
if(!xmlHttp){
xmlHttp=new ActiveXOject("Msxml2.XMLHTTP");
}
}
return xmlHttp;
} //获取XMLHttp对象
function callback() {
if(xmlHttp.readyState==4 && xmlHttp.status==200){
var result=xmlHttp.responseText;
//解析数据
var json=eval("("+result+")");
//动态显示数据，线束数据在输入框对的下面
setContent(json);
}
}
//设置关联数据的展示
function setContent(contents) {
ClearContent();
var size=contents.length;
for(var i=0;i<size;i++)
{
var nextNode=contents[i];//json格式的第i个数据
var li =document.createElement("li");
li.onmouseover=function(){
this.className="onmouse";
document.getElementById("keyword").value=this.innerHTML;
}
li.onmouseout=function(){
this.className="outmouse";
}
var text=document.createTextNode(nextNode);
li.appendChild(text);
document.getElementById("c").appendChild(li);
}
}
//清空数据
function ClearContent() {
document.getElementById("c").innerHTML="";
}
//当控件失去焦点时，清空数据
function outFouce() {
ClearContent();
}
//获得焦点时，
</script>
</head>
<body>
<div id="contain">
<div style="height: 20px;">
<input type="text" id="keyword" style="size:50px;" onkeyup="getMoreContents()" onblur="outFouce()" onfocus="getMoreContents()">
<input type="button" id="bu" value="百度一下" style="">
</div>
<div id="popDiv">
<ul id="c">
<li></li>
</ul>
</div>
</div>
</body>
</html>
后台searchServlet.Java
package search;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import net.sf.json.JSONArray;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class searchServlet
*/
@WebServlet("/searchServlet")
public class searchServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
static List<String> datas=new ArrayList<String>();
static {//假数据，模拟数据库读取
datas.add("ajax");
datas.add("bjax");
datas.add("ajaxfd");
datas.add("bfvd");
datas.add("dafdx");
datas.add("fdax");
datas.add("ahg");
datas.add("ddx");
}
/**
* @see HttpServlet#HttpServlet()
*/
public searchServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doPost(request, response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
String keyword=request.getParameter("keyword");
//System.out.println(keyword);
List<String> listdata= getData(keyword);
// 返回json,以流的形式写到前台
response.getWriter().write(JSONArray.fromObject(listdata).toString());
}
//获取假数据中符合条件的值
public List<String> getData(String keyword)
{
List<String> list=new ArrayList<String>();
for(String data:datas)
{
if(data.contains(keyword)){
list.add(data);
}
}
return list;
}
}
xml配置
<span style="font-size:18px;"><strong><?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1"> <servlet> <servlet-name>searchServlet</servlet-name> <servlet-class>search.searchServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>searchServlet</servlet-name> <url-pattern>/search/searchServlet</url-pattern> </servlet-mapping> <display-name>DropMeum</display-name> <welcome-file-list> <welcome-file>index.html</welcome-file> <welcome-file>index.htm</welcome-file> <welcome-file>index.jsp</welcome-file> <welcome-file>default.html</welcome-file> <welcome-file>default.htm</welcome-file> <welcome-file>default.jsp</welcome-file> </welcome-file-list> </web-app></strong></span>
目录结构
总结
以上所述是小编给大家介绍的JS+Ajax实现百度智能搜索框，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
相关推荐
-
JavaScript使用Ajax上传文件的示例代码
本文介绍了JavaScript使用Ajax上传文件的示例代码,分享给大家,具体如下: 实现文件的上传主要有两种方式: 使用form表单提交上传 html代码如下: <form id="uploadForm" enctype="multipart/form-data"> <input id="file" type="file" name="file"/> <button id=&
-
原生js中ajax访问的实例详解
原生js中ajax访问的实例详解 form表单中 登录名: 失去光标即触发事件 function createXmlHttp() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp = new XMLHttpRequest(); } catch (e) { try {// Internet Explorer xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (
-
浅谈Vue.js应用的四种AJAX请求数据模式
如果您闲的没事干去两个Vue.js开发人员:"在Vue应用中使用AJAX的正确姿势是咋样的?",您将会得到三种或更多的不同回答. Vue.js官方没有提供实现AJAX的指定方式,并且有许多不同的设计模式可以被有效地使用.每个都有自己的利弊,应根据要求进行判断.你甚至可以同时使用几个! 在本文中,我将向您展示您可以在Vue应用程序中实现AJAX的四个位置: 1.根实例 2.组件Components 3.Vuex actions 4.路线导航卫士 5.另加:奖金模式 我将解释每个方法,举一
-
js如何编写简单的ajax方法库
本文实例为大家分享了js编写ajax方法库的具体代码,供大家参考,具体内容如下 具体代码 ~function(){ //ajax:实现ajax请求的公共方法;当一个方法传递的参数过多,而且还不固定,我们使用对象统一传值法(把需要传递的参数值都放在一个对象中,一起传递进去即可) function ajax(options){ //把需要使用的参数值设定一个规则和初始值 var _default = { url:"",//请求的地址 type:"get",//请求的方式
-
基于jstree使用AJAX请求获取数据形成树
概述: 一般情况下都是通过ajax进行请求获取数据.boostrap+ajax 1.代码 //权限分配 $('#authority').click(function() { $("#jstree").jstree({ "core" : { "themes" : { "responsive": false }, // so that create works "check_callback" : true,
-
vuejs使用FormData实现ajax上传图片文件
我相信很多使用vuejs的朋友,都有采用ajax上传图片的需求,因为前后端分离后,我们希望都能用ajax来解决数据问题,传统的表单提交会导致提交成功后页面跳转,而使用ajax能够无刷新上传图片等文件. 其实已经有朋友封装了相关的npm包,但是我想说用原生的js api来实现,也用不了多少代码,而且更灵活,能使用原生就尽量用原生.接下来就以一个简单的头像上传来说明如何使用. 效果图 前端实现 <template> <div class="admin"> <d
-
JavaScript 通过Ajax 动态加载CheckBox复选框
废话不多说了,直接给大家贴代码了,具体代码如下所示: <pre name="code" class="html"> <div class="controls" id="compareyear"> </div></pre><br> <img src="http://img.blog.csdn.net/20170830165326131?watermark
-
Struts2.5 利用Ajax将json数据传值到JSP的实例
AJAX +JSON=>JSP AJAX AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面. JSON JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式.它基于 ECMAScript (w3c制定的js规
-
JS+Ajax实现百度智能搜索框
首先浏览实现后的结果,输入一个a之后会出现包含a的下拉列表,当我们点击某一个的时候,搜索框中就会出现点击的值.实现所需要的主要是ajax+js. 前端search.jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <html> <head> <title>Insert
-
Servlet+Ajax实现智能搜索框智能提示功能
利用无刷新技术智能变换搜索框的提示,同百度搜索 效果图 其基本原理: 1.给搜索框编写js绑定事件onkeyup(键盘输入时).onfocus(当鼠标点击搜索框外的时候清空提示) 2.首先获得用户输入.之后将获得的数据传给服务器,服务器将数据传给后台,后台获取服务器传来的数据进行处理,得到关联数据,向前端返回json格式,前端通过回调函数,将返回来的json解析成文本,将文本传输到搜索框下方的展示窗 如下为支持json的jar包 search.jsp <%@ page language="
-
js实现YouKu的漂亮搜索框效果
本文实例讲述了js实现YouKu的漂亮搜索框效果.分享给大家供大家参考.具体如下: 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-youku-search-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-trans
-
JS实现微信弹出搜索框 多条件查询功能
效果图如下所示: JS实现微信弹出搜索框 多条件查询功能的实现代码如下所示: <!--<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <%@ include file="/WEB-INF/views/include/mtaglib.jsp"%>--> <!DOCTYPE html> <
-
JS+CSS实现仿新浪微博搜索框的方法
本文实例讲述了JS+CSS实现仿新浪微博搜索框的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm
-
使用Ajax模仿百度搜索框的自动提示功能实例
啊啊,熬夜了.今天学习了ajax给我的感觉就是,"哇塞"ajax好酷炫哦,(额...后端狗,接触到了大前端的魅力了),这么晚了还是直奔主题把.Let's go! 百度搜索提示框,我想大家都很熟悉了把,是什么样子我也就不再赘述.直接看代码 来我们写一个简陋的jsp页面 Look! 是这个样子的 下面是代码: <%@ page language="java" contentType="text/html; charset=UTF-8" page
-
JavaScript实现百度搜索框效果
最近做了个百度搜索框今天给大家分享下. 效果: 1.当进入界面时,自动调用方法,获取当前的时间,并且实时更新时间. 2.点击页面头部的换肤,自动更换背景图片 3.鼠标点击搜索框的时候自动显示用户上次搜索的内容, 4.当鼠标放在用户上次搜索的内容的时候搜索框的内容变成鼠标悬浮的内容上 5.在搜索框中按回车的时候自动录入为上次输入的内容中,若本次内容和上次内容相同则不显示 6.点击百度一下按钮自动录入搜索框中的内容为上次搜索的内容 界面: 界面html代码: <!DOCTYPE html> <
-
Vue.js页面中有多个input搜索框如何实现防抖操作
debounce简介 debounce是lodash工具库中的一个非常好用的函数.在实现搜索框对输入进行动态查询的时候,我们需要防止前端频繁的发送查询请求给后端,这个时候就需要用到debounce,它可以设置一个时间间隔,比如300ms,忽略300毫秒内的输入变化.debounce的详细介绍可以参考 这篇 文章. debounce的高级用法 博主的页面中有3个搜索框,每个搜索框都需要动态响应用户的输入到后台去查询匹配的文章,如下图: 在Vue.js中如何实现多搜索框的debounce绑定,下面博
-
使用JavaScrip模拟实现仿京东搜索框功能
使用js模拟实现京东的搜索框,主要用了js中的onfocus(注册焦点事件),onblur(失去焦点的事件): 主要实现了: 在鼠标点进去的时候,里面的默认内容消失: 在输入之后,再点击搜索框外,输入的内容还在搜索框中: 如果输入为空,点击搜索框外,里面自动显示默认内容: 内容颜色的改变 效果图 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>京东搜
-
JS实现仿google、百度搜索框输入信息智能提示的实现方法
本文实例讲述了JS实现仿google.百度搜索框输入信息智能提示的实现方法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&qu