Servlet+Ajax实现智能搜索框智能提示功能

利用无刷新技术智能变换搜索框的提示,同百度搜索

效果图

其基本原理:

1.给搜索框编写js绑定事件onkeyup(键盘输入时)、onfocus(当鼠标点击搜索框外的时候清空提示)

2.首先获得用户输入、之后将获得的数据传给服务器,服务器将数据传给后台,后台获取服务器传来的数据进行处理,得到关联数据,向前端返回json格式,前端通过回调函数,将返回来的json解析成文本,将文本传输到搜索框下方的展示窗

如下为支持json的jar包

search.jsp

<%@ 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>
<title>ajax搜索</title>
<script type="text/javascript">
//获得更多关联信息的函数
function getMore(){
 var xmlHttp;
 //首先获得用户的输入
 var content = document.getElementById("keyword");
 if(content.value==""){
  keywordBlur();//执行一下清空方法,使搜索框在无数据的时候,下方残留数据也动态清空
  return;
 }
 //alert(content.value);
 //要给服务器发送用户输入的内容,要创建对象,叫XmlHttp对象
 //xmlHttp=获得XmlHttp对象
 xmlHttp=CreatXMLHttp();
 //alert(xmlHttp);
 //要给服务器发送数据
 var url="serch?keyword="+escape(content.value);
 //如果不用escape这个函数转化一下的话,传中文会有问题
 //true表示javascript的脚本会在send()方法之后继续执行,而不会等待来自服务器的相应
 xmlHttp.open("GET",url,true);
 //xmlHttp绑定一个回调方法去接受服务器传来的相应,会在xmlHttp状态改变的时候被调用
 //xmlHttp有0~4的状态,只关心4的方法
 //4为complete状态,表示交互完成,当交互完成时才会调用回调方法
 xmlHttp.onreadystatechange=callback;
 xmlHttp.send(null);//send里面发送的是内容体,但参数在URL里已经都写完了
 //回调函数==!!注意 这里回调方法要在方法内创建,因为创建的xmlHttp对象不是全局变量
 //是在getMore()方法里创建的,可以将变量提取出来,变成全局变量
 function callback(){
  if (xmlHttp.readyState==4){
   //200代表服务器相应成功。。。404代表资源未找到。。500服务器内部错误
   if(xmlHttp.status==200){
    //交互成功,获得相应的数据,是文本格式
    var result=xmlHttp.responseText;
    //解析json格式
    var json=eval("("+result+")");//要在两边加个小括号,js才能认识
    //获得数据之后就可以开始展示了。在输入框的下边展示
    setContent(json);
   }
  }
 }
 //设置关联数据展示,参数代表的是服务器传递过来的关联数据
 function setContent(contents){
  //setLocation();//设置跟输入框一样宽度
  keywordBlur();//在每次得到值之前先清空一下之前的残留数据
  var size=contents.length;//根据关联的数据长度,来生成多少<tr>
  //设置内容
  for(var i=0;i<size;i++){
   //不用appendChild()方法是因为不同浏览器可能不兼容该方法
   var nextNode=contents[i];//代表json格式的第i个元素
   var newRow=content_table_body.insertRow();//创建行
   var newCell=newRow.insertCell();//创建单元格
   newCell.innerHTML=contents[i];//将数据赋值给单元格
  }
 }
}
//获得XmlHttp对象
function CreatXMLHttp(){
 //要考虑不同浏览器的写法
 //大多数浏览器使用
 var xmlHttpReq;
 if(window.XMLHttpRequest){//火狐
  xmlHttpReq=new XMLHttpRequest();
 }else{
  /* if(window.ActiveXObject){
   xmlHttpReq=neww ActiveXObject("Microsoft.XMLHTTP");
   //例如ie有很多版本,不一定能创建出来这个对象,所以要添加以下一个判断
   //换一种方法,保证创建
   if(!xmlHttp){
    xmlHttpReq=new ActiveObject("Msxml2.XMLHTTP");
   }
  } */
  //一定要如下格式写 上述格式火狐IE亲测不好使
   try { //IE
    xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
   }
   catch (e) {
    try {//IE 浏览器
     xmlHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch (e) {
    }
   }
 }
 return xmlHttpReq;
}
//失去焦点的时候
function keywordBlur(){
 //要获得body的元素长度,才能知道要遍历多少次
  var contentTableBody=document.getElementById("content_table_body");
  var size=contentTableBody.childNodes.length;
   //因为是删除子节点,所以是从后往前才能删,同二叉树,删除子节点
  for(var i=size-1;i>=0;i--){
   contentTableBody.removeChild(contentTableBody.childNodes[i]);
  }
  document.getElementById("popDiv").style.border="none";
}
</script>
<style type="text/css">
/* #mydiv{
 position: absolute;
 left:30%;
 top:50%;
 margin-left: 100px;
} */
.mouseOver{
 background: #708090;
 color: #FFFAFA;
}
.mouseOut{
 background: #FFFAFA;
 color: #000000;
}
</style>
</head>
<body>
 <div id="mydiv">
  <!-- 输入框 -->
  <input type="text" id="keyword" size="50" onblur="keywordBlur()" onkeyup="getMore()" onfocus="getMore()"/>
  <input type="button" value="百度一下" wise="50px">
  <!-- 下面是内容展示的区域 -->
  <div id="popDiv">
   <table id="contentTable" bgcolor="#FFFAFA" border="0" cellpadding="0" cellspacing="0">
    <tbody id="content_table_body">
    <!-- 这个是动态查询出来的数据显示的地方 -->
     <!-- <tr><td>ajax1</td></tr>
    <tr><td>ajax2</td></tr>
    <tr><td>ajax3</td></tr> -->
    </tbody>
   </table>
  </div>
 </div>
</body>
</html>

SearchServlet.class

package com.ninka;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
public class SearchServlet extends HttpServlet{
 static List<String> datas = new ArrayList<String>();
 static{
  datas.add("ajax1");
  datas.add("ajax2");
  datas.add("ajax3");
  datas.add("bichi1");
  datas.add("bichi2");
  datas.add("php");
  datas.add("javascript");
  datas.add("java");
  datas.add("html");
 }
 @Override
 protected void doGet(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
  //设置下编码格式
  request.setCharacterEncoding("UTF-8");
  response.setCharacterEncoding("UTF-8");
  System.out.println("123");
  //首先获得客户端传来的数据,,注意传过来的参数关键字一定要写对,否则会空指针异常
  String keyword = request.getParameter("keyword");
  //获得关键字之后进行处理,得到关联数据
  List<String> listData = getData(keyword);
  //返回json格式
  System.out.println(JSONArray.fromObject(listData));
  //JSONArray.fromObject(listData);
  response.getWriter().write(JSONArray.fromObject(listData).toString());
 }
 //获得关联数据方法
 public List<String> getData(String keyword){
  List<String> list = new ArrayList<String>();
  for(String data:datas){
   //如果传递过来的数据,属于词库里面的话,那么就把包含关键词的数据打包成list,向客户端传
   if(data.contains(keyword)){
    list.add(data);
   }
  }
  return list;
 }
}

web.xml

<?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">
 <display-name>ajaxtest</display-name>
 <welcome-file-list>
  <welcome-file>search.jsp</welcome-file>
 </welcome-file-list>
 <servlet>
 <!-- 为什么要用search?因为在js中定义url的时候写的是search -->
  <servlet-name>search</servlet-name>
  <servlet-class>com.ninka.SearchServlet</servlet-class>
 </servlet>
 <servlet-mapping>
  <servlet-name>search</servlet-name>
  <url-pattern>/</url-pattern>
 </servlet-mapping>
</web-app>

以上所述是小编给大家介绍的Servlet+Ajax实现智能搜索框智能提示功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

时间: 2017-04-21

JS+Ajax实现百度智能搜索框

首先浏览实现后的结果,输入一个a之后会出现包含a的下拉列表,当我们点击某一个的时候,搜索框中就会出现点击的值.实现所需要的主要是ajax+js. 前端search.jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <html> <head> <title>Insert

javascript搜索框效果实现方法

本文实例讲述了javascript搜索框效果实现方法.分享给大家供大家参考.具体实现方法如下: <!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">

自动完成的搜索框javascript实现

在很多需要搜索的网站, 都会有一个自动完成的搜索框. 方便用户查找他们想要的搜索词. 帮助用户快速找到自己想要的结果. 这种方式是比较友好的. 所以是比较提倡使用的. 我们这次就来实现这一效果. 我们通过两篇文章来进行讲解. 首先我们来完成界面的设计布局. 界面的HTML结构, 第一个少不了的是一个搜索框, 第二个就是搜索的点击按钮. <div class="search"> <input type="text" value=""

ajax+php 谷歌搜索框自动填充功能 实例代码

复制代码 代码如下: <html> <head> <script language="javascript"><!-- var http_request; function update(v){ if (window.XMLHttpRequest) { // Mozilla, Safari, ... http_request = new XMLHttpRequest(); } else if (window.ActiveXObject) { /

利用jsonp跨域调用百度js实现搜索框智能提示

项目中常常用到搜索,特别是导航类的网站.自己做关键字搜索不太现实,直接调用百度的是最好的选择. 使用jquery.ajax的jsonp方法可以异域调用到百度的js并拿到返回值,当然$.getScript也可以实现跨域调用js. ok,了解了jsonp的原理和应用后,我们看看百度的智能提示是如何做的 在chrome的调试窗口下看看百度搜索发出的请求.当输入关键字"a",请求如图: 用firebug看下请求的参数,如图: 请求方式:get请求 请求参数:wd明显是要搜索的关键字:cb是请求

js实现搜索框关键字智能匹配代码

只要使用搜索引擎的朋友应该都有这样的体会,就是当在搜索框输入关键字的时候,会出现自能匹配现象,这绝对是非常好的用户体验,下面就是一段类似的代码,当然这里只是掩饰,所以只能匹配的数据都是本地固定好的,在实际应用中可以才能够数据库读取数据. 效果图: 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" co

Angularjs material 实现搜索框功能

angular-material 是 AngularJS 的一个子项目,用来提供实现了 Material Design 风格的组件. Material 提供了大量的android 风格的UI组件,使用 angularjs + Material 可以很容易开发出风格接近原生 Android 5.x 的web界面.但在实际使用的过程中并不总是能满足我们的需求.开发一个组件就成了我们必须学习的内容. 下面是一个组件的实现: //前面省略若干代码 directive('mdSearchInput',[f

JavaScript实现搜索框的自动完成功能(一)

在很多需要搜索的网站, 都会有一个自动完成的搜索框. 方便用户查找他们想要的搜索词. 帮助用户快速找到自己想要的结果. 这种方式是比较友好的. 所以是比较提倡使用的. 先给大家展示下效果图: 实现这个功能需要服务端配合.客户端通过脚本来展示从服务端取得的数据. 先看客户端的HTML: 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DT

使用Ajax模仿百度搜索框的自动提示功能实例

啊啊,熬夜了.今天学习了ajax给我的感觉就是,"哇塞"ajax好酷炫哦,(额...后端狗,接触到了大前端的魅力了),这么晚了还是直奔主题把.Let's go! 百度搜索提示框,我想大家都很熟悉了把,是什么样子我也就不再赘述.直接看代码 来我们写一个简陋的jsp页面 Look! 是这个样子的 下面是代码: <%@ page language="java" contentType="text/html; charset=UTF-8" page

easyUI实现类似搜索框关键词自动提示功能示例代码

在一个DataGrid里面,搜索行所在位置 实现的效果如下: 在搜索框中输入部分列名关键字,即可匹配到行的位置. EasyUI的SearchBox组件只提供了静态搜索框,我们可以使用ComboBox来实现动态的自动关键匹配效果,并且不需要加载远程数据.当前页面的DataGrid的数据我们可以直接在本地获取之. 代码如下: setp1.创建combobox <div style="text-align: left;background-color: #E0ECFF;padding-left:

php 搜索框提示(自动完成)实例代码

百度的搜索大家都在用,当用户输入文字时,搜索框下面自动提示相关的信息,加强了用户体验,的确不错,那么这个效果是如何实现的呢 先看一下效果图吧,这样更有动力,要不然大家还不知道我在讲什么,到底要达到什么样的效果! 下面先主要讲解原理: 在search.html页面中,用户在搜索框内输入"j"时,使用javascript获取搜索框的文本内容,到数据库中查找相关的内容并返回,再使用javascript将服务器返回的结果显示在搜索框下面的提示框内,供用户参考选择. 具体的实现方法: 首先在页面

Android 取消蓝牙配对框实现自动配对功能

我看了几个文章,主要是接受配对广播,然后设置pin,实现配对,但是网上的大部分手机是不可以的,Android.bluetoothdevice 下 action_pair_request ,没有定义这个,开始困扰了我一点时间,实现难度:是否能进入那个广播响应 定义了一个类,这个是网上的可以直接用 package zicox.esc; import java.lang.reflect.Method; import java.lang.reflect.Field; import android.blu

JS实现微信弹出搜索框 多条件查询功能

效果图如下所示: JS实现微信弹出搜索框 多条件查询功能的实现代码如下所示: <!--<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <%@ include file="/WEB-INF/views/include/mtaglib.jsp"%>--> <!DOCTYPE html> <

基于javascript实现仿百度输入框自动匹配功能

本文实例讲解了基于javascript实现仿百度输入框自动匹配功能的详细代码,现在很多网站都有这种效果,在文本框输入一个字符,下边会出来相匹配的内容,这个代码就演示了这个功能是如何完成的,当然,这是个静态的,你可以将提示的内容从数据库读取出来,要用到AJAX那东东,分享给大家供大家参考,具体内容如下 <HTML> <HEAD> <title>带输入匹配的文本框</title> <style> body,div { font-family:verd

Android自定义View实现搜索框(SearchView)功能

概述 在Android开发中,当系统数据项比较多时,常常会在app添加搜索功能,方便用户能快速获得需要的数据.搜索栏对于我们并不陌生,在许多app都能见到它,比如豌豆荚 在某些情况下,我们希望我们的自动补全信息可以不只是纯文本,还可以像豌豆荚这样,能显示相应的图片和其他数据信息,因此Android给我们提供的AutoCompleteTextView往往就不够用,在大多情况下我们都需要自己去实现搜索框. 分析 根据上面这张图,简单分析一下自定义搜索框的结构与功能,有 1. 搜索界面大致由三部门组成

基于JavaScript实现评论框展开和隐藏功能

1.效果图如下所示, 点击评论会在对应的评论区域展开评论输入框,点击取消会取消对应的评论输入框 2.html代码:需要引入jQuery.js <div class="nr-comment"> <div class="nr-comment-con"> <div class="nr-comment-nav"> <div class="comment-number"> <span

JS实现搜索框文字可删除功能

废话不多说了,直接给大家贴js搜索框文字可删除功能,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS实现搜索框文字可删除</title> <style> *:focus {outline: none; } body {width: 400px;margin: 100px auto;} #topsearch {