jquery ajax 实现谷歌搜索效果

最新推荐文章于 2024-04-21 14:12:37 发布

wyl15982038375

最新推荐文章于 2024-04-21 14:12:37 发布

阅读量840

点赞数

分类专栏：客户端技术文章标签： jquery ajax autocomplete function servlet string

本文链接：https://blog.csdn.net/wyl15982038375/article/details/6281177

版权

客户端技术专栏收录该内容

3 篇文章 0 订阅

订阅专栏

完成的功能如：搜索效果图

第步一新建一个web工程：autoCompleteStart

二向工程新添搜索页面如：

JQueryAutoComplete.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>JQueryAutoComplete.html</title>
    <script type="text/javascript" src="Jslib/jquery.js"></script>
     <script type="text/javascript" src="Jslib/jqueryauto.js"></script>
</head>

<body>
   <input type="text" id="word">
    <input type="button" value="提交"/></br>
    <div id="auto"></div>
</body>
</html>

三新建一个servlert com.test.autocom.sAutoComplete.java

package com.test.autocom;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@SuppressWarnings("serial")
public class AutoComplete extends HttpServlet {

public void doGet(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
  String world = request.getParameter("world");
  request.setAttribute("world", world);
  //在Ajax的请求当中它不返回一个页面，只返回它所请求的数据，所以也可以称作为数据层
  request.getRequestDispatcher("worldxml.jsp").forward(request, response);
}

public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doGet(request, response);
}

}
四配置web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<servlet>
    <description>This is the description of my J2EE component</description>
    <display-name>This is the display name of my J2EE component</display-name>
    <servlet-name>AutoCompleteStart</servlet-name>
    <servlet-class>com.test.autocom.AutoComplete</servlet-class>
</servlet>

<servlet>
<servlet-name>AutoComplete</servlet-name>
    <servlet-class>com.test.autocom.AutoComplete</servlet-class>
</servlet>

<servlet-mapping>
    <servlet-name>AutoCompleteStart</servlet-name>
    <url-pattern>/autoCompleteStart</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>AutoComplete</servlet-name>
    <url-pattern>/AutoComplete</url-pattern>
</servlet-mapping>
<welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>

新建一个worldxml.jsp页面用于返回定义查询数据的内容

<%@ page language="java" contentType="text/xml; charset=utf-8"%>
<%
String word = (String)request.getAttribute("world");
%>
<worlds>
<%if("absolute".startsWith(word)){%>
  <world>absolute</world>
<%}%>
<%if("anyone".startsWith(word)){%>
  <world>anyone</world>
<%}%>
<%if("anything".startsWith(word)){%>
  <world>anything</world>
<%}%>
<%if("apple".startsWith(word)){%>
  <world>apple</world>
<%}%>
<%if("abandom".startsWith(word)){%>
  <world>abandom</world>
<%}%>
<%if("breach".startsWith(word)){%>
  <world>breach</world>
<%}%>
<%if("break".startsWith(word)){%>
  <world>break</world>
<%}%>

</worlds>
在webRoot目录下新建一个Jslib目录并在这个目录拷入jquery.js使用jquery必须的文件

在这个目录下新建jqueryauto.js 这个js文件里面完成js的触发方法的操作内容如下：

//用于定位键盘上下时，保证返回的数据条有光亮的部分
var heightLightIndex = -1;
var timeoutid;
$(document).ready(function(){
var wordInput = $('#word');
var wordInputOffset = wordInput.offset();
$('#auto').hide().css("border","1px black solid").css("position","absolute")
  .css("top",wordInputOffset.top+wordInput.height()+5+"px")
  .css("left",wordInputOffset.left+"px").width(wordInput.width()+2+"px");
//给文本添加键盘按下并弹起的事件

wordInput.keyup(function(event){
  var myEvent = event || window.event;
  var keyCode =myEvent.keyCode;
  //8，46是退格键和删除键
  if(keyCode>=65&&keyCode<=90||keyCode==8||keyCode==46){
   var worldText = $('#word').val();
   if(worldText != ""){
    //取消上次未完成都的延迟操作
    clearTimeout(timeoutid);

    timeoutid = setTimeout(function(){

     $.post("AutoComplete",{world:worldText},function(data){
      var jqueryObj = $(data);
      var worldNodes = jqueryObj.find("world");
      var autoNode = $('#auto');
      autoNode.html("");
      //each中的第一参数就是所遍历这个数组的下标
      worldNodes.each(function(i){
       var wordNode = $(this);
       var newDivNode = $('<div>').attr("id",i);
       newDivNode.html(wordNode.text()).appendTo(autoNode);;
       newDivNode.mouseover(function(){
        if(heightLightIndex != -1){
         $('#auto').eq(heightLightIndex).css("background-color","white");
        }
        heightLightIndex = $(this).attr("id");
        $(this).css("background-color","red");
       });
       newDivNode.mouseout(function(){
        $(this).css("background-color","white");
       });
       newDivNode.click(function(){
        var newDivNodeText = $(this).text();
        heightLightIndex = -1;
        $("#word").val(newDivNodeText);
        $('#auto').hide();
       });
      });
      if(worldNodes.length>0){
       $('#auto').show();
      }else{
       $('#auto').hide();
       heightLightIndex = -1;
      }
     },"xml");
    },500);
   }else{
    $('#auto').hide();
    heightLightIndex = -1;
   }
  }else if(keyCode == 38 || keyCode == 40){
   //如果输入的是向上键
   if(keyCode == 38 ){
    var autoNodes = $('#auto').children("div");
    if(heightLightIndex != -1){
     autoNodes.eq(heightLightIndex).css("background-color","white");
     heightLightIndex--;
    }else{
     heightLightIndex = autoNodes.length-1;
    }
    autoNodes.eq(heightLightIndex).css("background-color","red");
   }
   //向下键
   if(keyCode == 40 ){
    var autoNodes = $('#auto').children("div");
    if(heightLightIndex != -1){
     autoNodes.eq(heightLightIndex).css("background-color","white");
    }
     heightLightIndex++;
    if(heightLightIndex == autoNodes.length){
     heightLightIndex = 0;
    }
    autoNodes.eq(heightLightIndex).css("background-color","red");
   }

  }else if(keyCode == 13){
   if(heightLightIndex != -1){
    var contentText = $('#auto').hide().children("div").eq(heightLightIndex).text();
    heightLightIndex = -1;
    $("#word").val(contentText)
   }else{
    alert("文本框中的["+$("#word").val()+"]被提交了");
    $('#auto').hide();
    //在某个节点上get(0)返回本来的dom对象在dom对象上让文本失去焦点
    $("#word").get(0).blur();

   }
  }
});
$("input[type='button']").click(function(){
  alert("文本框中的["+$("#word").val()+"]被提交了");
});
});

wyl15982038375

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery ajax 实现谷歌搜索效果

<br />完成的功能如：<br /> 第步一新建一个web工程：autoCompleteStart<br />二向工程新添搜索页面如：<br />JQueryAutoComplete.html<br /><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><br /><html><br /> <head><br /> <title>JQueryAutoComplete.html</title><br /> <sc
复制链接

扫一扫