模仿google自动补全简单代码

最新推荐文章于 2019-10-17 20:06:04 发布

相随心声

最新推荐文章于 2019-10-17 20:06:04 发布

阅读量1.2k

点赞数

分类专栏： Jquery 文章标签： google function autocomplete input button div

本文链接：https://blog.csdn.net/xiangsuixinsheng/article/details/6612941

版权

Jquery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

AutoCompleteServer代码如下:

package com.web;

import java.io.IOException;
import java.io.PrintWriter;

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

public class AutoCompleteServer extends HttpServlet {

public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

//获取从页面传递过来的参数
String word=request.getParameter("word");
System.out.println("AutoComplete");
//将字符串保存到request对象中
request.setAttribute("word", word);
//将请求转发给视图层
request.getRequestDispatcher("/keyWord.jsp").forward(request, response);
}

public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

doGet(request,response);

}

}

autoComplete.js页面代码如下:

$(document).ready(function(){
//自动补全框开始隐藏起来
$("#auto").hide().css("border","1px red solid");

//给文本框注册键盘按下弹起事件
$("#word").keyup(function(){
//处理文本框中键盘事件

//首先获取文本框中的内容
var wordText=$("#word").val();
//将文本框中的内容发送给服务器
$.post("servlet/AutoCompleteServer",{word:wordText},function(data){
//将dom对象data转换成JQuery的对象
var jqueryObj=$(data);
//找到autoComplete.jsp所有的word节点
var wordNodes=jqueryObj.find("word");
//遍历所有的word节点,取出单词内容,然后将单词内容添加到弹出框中
var autoNdoe=$("#auto");
wordNodes.each(function(){
//获取单词内容
var wordNode=$(this);
//新建div节点,取出单词内容,然后将单词加入到新建的节点中
$("<div>").html(wordNode.text()).appendTo(autoNdoe);
});
//让弹出框显示传回的数据
if(wordNodes.length>0){
$("#auto").show();
}
},"xml");
});

//给按钮添加事件,表示文本框中的数据被提交
$("input[type='button']").click(function(){
alert("文本框中的["+$("#word").val()+"]被提交了")
});
})

keyWord.jsp页面代码如下:

<%@ page language="java" contentType="text/xml;charset=utf-8"%>
<words>
<word>absolute</word>
<word>anyone</word>
<word>apple</word>
<word>abandon</word>
<word>abreak</word>
</words>

autoComplete.html代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
   <title>jquery仿google自动补全</title>

   <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
   <meta http-equiv="description" content="this is my page">
   <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   <script type="text/javascript" src="js/jquery-1.4.2.js"></script>
   <script type="text/javascript" src="js/autoComplete.js"></script>


  </head>

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

此代码的功能有些bug。在后面的文章会持续更新。

相随心声

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
模仿google自动补全简单代码

AutoCompleteServer代码如下:package com.web;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import ja
复制链接

扫一扫