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


Posted in Javascript onAugust 04, 2017

首先浏览实现后的结果,输入一个a之后会出现包含a的下拉列表,当我们点击某一个的时候,搜索框中就会出现点击的值。实现所需要的主要是ajax+js。

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

前端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实现百度智能搜索框

总结

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

Javascript 相关文章推荐
JavaScript中的new的使用方法与注意事项
May 16 Javascript
javaScript 读取和设置文档元素的样式属性
Apr 14 Javascript
js 操作select相关方法函数
Dec 06 Javascript
javascript中创建对象的三种常用方法
Dec 30 Javascript
分享五个有用的jquery小技巧
Oct 08 Javascript
如何通过js实现图片预览功能【附实例代码】
Mar 30 Javascript
jQuery异步提交表单的两种方式
Sep 13 Javascript
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
Jul 30 Javascript
JS简单实现点击跳转登陆邮箱功能的方法
Oct 31 Javascript
vue实现计步器功能
Nov 01 Javascript
js实现树形数据转成扁平数据的方法示例
Feb 27 Javascript
微信小程序scroll-view的滚动条设置实现
Mar 02 Javascript
vue插件vue-resource的使用笔记(小结)
Aug 04 #Javascript
分享Bootstrap简单表格、表单、登录页面
Aug 04 #Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
Aug 04 #Javascript
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 #jQuery
vue修改vue项目运行端口号的方法
Aug 04 #Javascript
详解Angular2表单-模板驱动的表单(Template-Driven Forms)
Aug 04 #Javascript
微信小程序 本地图片按照屏幕尺寸处理
Aug 04 #Javascript
You might like
php AJAX实例根据邮编自动完成地址信息
2008/11/23 PHP
PHP 裁剪图片成固定大小代码方法
2009/09/09 PHP
PHP中文乱码解决方案
2015/03/05 PHP
Yii扩展组件编写方法实例分析
2015/06/29 PHP
JS延迟加载(setTimeout) JS最后加载
2010/07/15 Javascript
在VS2008中使用jQuery智能感应的方法
2010/12/30 Javascript
cookie.js 加载顺序问题怎么才有效
2013/07/31 Javascript
extjs表格文本启用选择复制功能具体实现
2013/10/11 Javascript
原生js和jquery中有关透明度设置的相关问题
2014/01/08 Javascript
node.js中的fs.readlink方法使用说明
2014/12/17 Javascript
javascript正则表达式定义(语法)总结
2016/01/08 Javascript
vue2.0+webpack环境的构造过程
2016/11/08 Javascript
微信小程序 支付简单实例及注意事项
2017/01/06 Javascript
解析Vue2.0双向绑定实现原理
2017/02/23 Javascript
简单好用的nodejs 爬虫框架分享
2017/03/26 NodeJs
详解用vue-cli来搭建vue项目和webpack
2017/04/20 Javascript
jQuery实现动态给table赋值的方法示例
2017/07/04 jQuery
iview给radio按钮组件加点击事件的实例
2017/09/30 Javascript
Vue-resource拦截器判断token失效跳转的实例
2017/10/27 Javascript
利用python模拟实现POST请求提交图片的方法
2017/07/25 Python
Java与Python两大幸存者谁更胜一筹呢
2018/04/12 Python
python实现批量修改图片格式和尺寸
2018/06/07 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/26 Python
python交易记录链的实现过程详解
2019/07/03 Python
Python 通过截图匹配原图中的位置(opencv)实例
2019/08/27 Python
Python编译为二进制so可执行文件实例
2019/12/23 Python
Python爬虫requests库多种用法实例
2020/05/28 Python
python线性插值解析
2020/07/05 Python
python解包概念及实例
2021/02/17 Python
HTML5实现视频弹幕功能
2019/08/09 HTML / CSS
对象的序列化(serialization)类是面向流的,应如何将对象写入到随机存取文件中
2015/06/22 面试题
食堂厨师岗位职责
2014/08/25 职场文书
防灾减灾标语
2014/10/07 职场文书
2014年个人委托书范本
2014/10/13 职场文书
遗嘱继承权公证书
2015/01/26 职场文书
学校通报表扬范文
2015/05/04 职场文书