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 new Date() 出现NaN 的分析
Oct 23 Javascript
JS Pro-深入面向对象的程序设计之继承的详解
May 07 Javascript
js确认删除对话框效果的示例代码
Feb 20 Javascript
JS 获取浏览器和屏幕宽高等信息代码
Mar 31 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
Jul 31 Javascript
轻量级的原生js日历插件calendar.js使用指南
Apr 28 Javascript
jQuery EasyUI Dialog拖不下来如何解决
Sep 28 Javascript
功能强大的jquery.validate表单验证插件
Nov 07 Javascript
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
Nov 16 Javascript
详解数组Array.sort()排序的方法
May 09 Javascript
深入理解Vue官方文档梳理之全局API
Nov 22 Javascript
新手入门js闭包学习过程解析
Oct 08 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
Yii实现多数据库主从读写分离的方法
2014/12/29 PHP
PHP简单生成缩略图相册的方法
2015/07/29 PHP
Laravel5.1 框架响应基本用法实例分析
2020/01/04 PHP
php把文件设置为插件的技巧方法
2020/02/03 PHP
Laravel5.3+框架定义API路径取消CSRF保护方法详解
2020/04/06 PHP
js 发个判断字符串是否为符合标准的函数
2009/04/27 Javascript
Javascript 类与静态类的实现(续)
2010/04/02 Javascript
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
2011/01/06 Javascript
IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素
2011/07/31 Javascript
nodejs win7下安装方法
2012/05/24 NodeJs
jQuery插件-jRating评分插件源码分析及使用方法
2012/12/28 Javascript
Extjs Gird 支持中文拼音排序实现代码
2013/04/15 Javascript
获取表单控件原始(初始)值的方法
2013/08/21 Javascript
js取得html iframe中的元素和变量值
2014/06/30 Javascript
jquery实现从数组移除指定的值
2015/06/24 Javascript
jquery实现转盘抽奖功能
2017/01/06 Javascript
浅谈对Angular中的生命周期钩子的理解
2017/07/31 Javascript
Three.JS实现三维场景
2018/12/30 Javascript
微信小程序button标签open-type属性原理解析
2020/01/21 Javascript
JS一次前端面试经历记录
2020/03/19 Javascript
vue中使用v-for时为什么不能用index作为key
2020/04/04 Javascript
python通过colorama模块在控制台输出彩色文字的方法
2015/03/19 Python
Python中按值来获取指定的键
2019/03/04 Python
使用Python画股票的K线图的方法步骤
2019/06/28 Python
python实现大学人员管理系统
2019/10/25 Python
Python3实现配置文件差异对比脚本
2019/11/18 Python
HTML5边玩边学(2)基础绘图实现方法
2010/09/21 HTML / CSS
解析html5 canvas实现背景鼠标连线动态效果代码
2019/06/17 HTML / CSS
AmazeUI框架搭建的方法步骤(图文)
2020/08/17 HTML / CSS
馥绿德雅美国官方网站:Rene Furterer头皮护理专家
2019/05/01 全球购物
Java的类与C++的类有什么不同
2014/01/18 面试题
物流管理专业毕业生自荐信
2014/03/04 职场文书
消防安全责任书范本
2014/04/15 职场文书
2015年学生资助工作总结
2015/05/25 职场文书
MySQL中的引号和反引号的区别与用法详解
2021/10/24 MySQL
python pandas 解析(读取、写入)CSV 文件的操作方法
2022/12/24 Python