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 相关文章推荐
取得窗口大小 兼容所有浏览器的js代码
Aug 09 Javascript
jQuery表格插件datatables用法总结
Sep 05 Javascript
js获取微信版本号的方法
May 12 Javascript
Node.js 应用跑得更快 10 个技巧
Apr 03 Javascript
JS控制文本域只读或可写属性的方法
Jun 24 Javascript
js计算系统当前日期是星期几的方法
Jul 14 Javascript
关于JS中的方法是否加括号的问题
Jul 27 Javascript
javascript数据类型详解
Feb 07 Javascript
vue.js+Echarts开发图表放大缩小功能实例
Jun 09 Javascript
vue.js前后端数据交互之提交数据操作详解
Apr 24 Javascript
如何用Node写页面爬虫的工具集
Oct 26 Javascript
Vue+Webpack完美整合富文本编辑器TinyMce的方法
Nov 30 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 防注入函数(格式化数据)
2011/08/08 PHP
php面向对象中static静态属性与方法的内存位置分析
2015/02/08 PHP
Codeigniter的dom类用法实例
2015/06/26 PHP
PHP中array_keys和array_unique函数源码的分析
2016/02/26 PHP
php实现数组中出现次数超过一半的数字的统计方法
2018/10/14 PHP
一种JavaScript的设计模式
2006/11/22 Javascript
jquery自定义滚动条插件示例分享
2014/02/21 Javascript
javascript实现列表滚动的方法
2015/07/30 Javascript
详解javascript中的事件处理
2015/11/06 Javascript
JavaScript中的操作符类型转换示例总结
2016/05/30 Javascript
用jQuery的AJax实现异步访问、异步加载
2016/11/02 Javascript
canvas学习之API整理笔记(二)
2016/12/29 Javascript
JS求解三元一次方程组值的方法
2017/01/03 Javascript
利用ES6语法重构React组件详解
2017/03/02 Javascript
浅谈vue-router2路由参数注意的问题
2017/11/08 Javascript
详解react、redux、react-redux之间的关系
2018/04/11 Javascript
js canvas实现红包照片效果
2018/08/21 Javascript
vue中使用gojs/jointjs的示例代码
2018/08/24 Javascript
mockjs+vue页面直接展示数据的方法
2018/12/19 Javascript
vue移动端屏幕适配详解
2019/04/30 Javascript
用node.js写一个jenkins发版脚本
2019/05/21 Javascript
python将秒数转化为时间格式的实例
2018/09/16 Python
Django框架之DRF 基于mixins来封装的视图详解
2019/07/23 Python
在keras中获取某一层上的feature map实例
2020/01/24 Python
对Tensorflow中tensorboard日志的生成与显示详解
2020/02/04 Python
python开发一款翻译工具
2020/10/10 Python
利用CSS3实现开门效果实例源码
2016/08/22 HTML / CSS
《小儿垂钓》教学反思
2014/02/23 职场文书
加入学生会演讲稿
2014/04/24 职场文书
艺术教育实施方案
2014/05/03 职场文书
公司领导班子召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
学校机关党总支领导班子整改工作方案
2014/10/26 职场文书
汽车4S店前台接待岗位职责
2015/04/03 职场文书
党性教育心得体会(共6篇)
2016/01/21 职场文书
秀!学妹看见都惊呆的Python小招数!【详细语言特性使用技巧】
2021/04/27 Python
OpenCV实现普通阈值
2021/11/17 Java/Android