JSP页面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JqueryAutoComplete</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
</head>
<script type="text/javascript" src="../javascript/jquery.js"></script>
<script type="text/javascript" src="../javascript/auto.js"></script>
<body>
Google Suggest <input id="word" type="text">
<input type="button" value="Click"><br/>
<div id="auto"></div>
</body>
</html>
JS文件
//全局变量，高亮的信息-1表示没有选中
var highlightindex = -1;
//延时处理
var timeout;
$(document).ready(function(){
var wordInput = $("#word");
//获得JQUERY封装的一个对象
var wordInputOffset = wordInput.offset();
//设置DIV为隐藏，并设置边框属性
$("#auto").hide().css("border","1px black solid")
.css("position","absolute")
//input离上面的长度+input的高（宽）
.css("top",wordInputOffset.top+wordInput.height()+5+"px")
//input高左面的的长度
.css("left",wordInputOffset.left+"px")
//input的宽度
.width(wordInput.width()+6+"px");
//添加事件
$("#word").keyup(function(event){
var myEvent = event || window.event;
var myKeyCode = myEvent.keyCode;
//给页面的DIV做一个缓存
var div = $("#auto");
//获得文件框里面的值
if(myKeyCode>64 && myKeyCode<91 || myKeyCode==8 || myKeyCode==46){
var wordText = $("#word").val();
if(wordText!=""){
//延时操作
clearTimeout(timeout);
timeout = setTimeout(function(){
//和服务器端交互，第四个参数设置返回是XML数据
$.post("../servlet/AutoComplete",{word:wordText},function(data){
//万能的$获得XML数据
var xmlobj = $(data);
//找到其中的WORD标签
var wordNodes = xmlobj.find("word");
div.html("");
//循环输出wordNodes
wordNodes.each(function(i){
//$(this)表示当前的WORD字段
var wordNode = $(this);
//创建 DIV并,设值，再添加到页面的DIV上.(还可以属性attr("value",text); )
var newDiv = $("<div>").attr("id",i);
newDiv.html(wordNode.text()).appendTo(div);
newDiv.mouseover(function(){
if(highlightindex!=-1){
$("#auto").children("div").eq(highlightindex).css("background-color","white");
}
highlightindex = $(this).attr("id");
$(this).css("background-color","blue");
});
newDiv.mouseout(function(){
$(this).css("background-color","white");
});
newDiv.click(function(){
$("#auto").hide();
var textClick = $("#auto").children("div").eq(highlightindex).text();
highlightindex = -1;
$("#word").val(textClick);
});
});
//如果返回的wordNodes长度大于0就show
if(wordNodes.length > 0){
div.show();
}else{
div.hide();
highlightindex = -1;
}
},"xml");
},1000);
}else{
//如果文本信息为空就隐藏
div.hide();
highlightindex = -1;
}
//键盘向上向下键
}else if(myKeyCode == 38 || myKeyCode ==40){
//向上
if(myKeyCode == 38){
//获得ID为auto里面的DIV对象
var autoNodes = $("#auto").children("div");
//如果没有被选中
if(highlightindex != -1){
//设置CSS
autoNodes.eq(highlightindex).css("background-color","white");
highlightindex--;
}else{
highlightindex = autoNodes.length - 1;
}
autoNodes.eq(highlightindex).css("background-color","blue");
}
//向下
if(myKeyCode == 40){
var autoNodes = $("#auto").children("div");
if(highlightindex != -1){
autoNodes.eq(highlightindex).css("background-color","white");
highlightindex++;
}else{
highlightindex++;
}
if(highlightindex == autoNodes.length){
highlightindex = 0;
}
autoNodes.eq(highlightindex).css("background-color","blue");
}
//回车键
}else if(myKeyCode ==13){
if(highlightindex!=-1){
//获得选中的那个的文本值
var textInputText = $("#auto").children("div").eq(highlightindex).text();
highlightindex = -1;
$("#word").val(textInputText);
$("#auto").hide();
}else{
alert("提交服务器");
$("#auto").hide();
//失去焦点
$("#word").get(0).blur();
}
}
});
//获得一个input对象，并且他的type属性为button
$("input[type='button']").click(function(){
alert("提交服务器");
});
});
Servlet后台代码
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
request.setCharacterEncoding("utf-8");
String word = request.getParameter("word");
System.out.println(i++);
request.setAttribute("word",word);
request.getRequestDispatcher("../jqueryexample/wordxml.jsp").forward(request, response);
}
JSP输的XML
<%@ page language="java" contentType="text/xml; charset=utf-8" pageEncoding="UTF-8"%>
<words>
<word><%=request.getAttribute("word")%></word>
<word>anyone</word>
<word>ant</word>
<word>apple</word>
<word>浪花</word>
<word>break</word>
<word>book</word>
<word>boolean</word>
<word>blue</word>
</words>
分享到：
相关推荐
在本文中，我们将探讨如何使用ASP来模仿Google Suggest风格的下拉菜单效果。Google Suggest是一种自动补全功能，当用户在搜索框中输入文本时，它会提供与输入内容匹配的相关建议。这种功能提高了用户体验，减少了...
Google Suggest 是一个基于JavaScript实现的动态下拉菜单功能，它在用户输入关键词时提供实时的搜索建议。这一功能的核心原理是利用JavaScript在当前网页中创建一个iframe元素。这个iframe用于显示与用户输入相关的...
谷歌下拉菜单，也被称为Google Suggest或自动补全，是谷歌搜索引擎中的一项功能，它在用户输入查询词时提供实时的建议搜索项。这项功能不仅提高了搜索效率，还为用户提供了一种更快速、准确地找到所需信息的方式。在...
【标题】"飞飞模仿google(suggest)下拉提示框v1.6.rar"是一个模拟谷歌搜索下拉提示功能的程序。这个程序旨在为用户提供类似于谷歌搜索引擎的自动填充建议体验，帮助用户更快地找到他们想要搜索的内容。谷歌的下拉...
jQuery Suggest 插件正是基于这个库构建的，利用其强大的功能来实现动态输入建议。 ### 2. Suggest 插件的核心功能 - **实时匹配**：当用户在输入框中输入字符时，插件会根据预设的数据源实时显示匹配的建议列表。...
整个实现过程通过JavaScript与ASP.NET后端的协同工作，实现了动态的谷歌建议下拉菜单功能。用户在输入框中输入时，前端通过Ajax向服务器发起请求，服务器处理请求并返回匹配的建议，前端接收到响应后更新下拉菜单...
此小程序是模仿Google(sgguest)输入提示框所编写 亦可用于用户注册邮箱时的提示 此程序使用方便简单、易用灵活 且不限Asp、php、net 更新说明： 1.支持xhtml 2.兼容IE6,IE7,FF 3.支持input显示与value分离 4.支持...
基于JQUERY的SUGGEST效果，自己写的
JQuery插件Suggest来做那些机票预订网站中的输入智能提示功能，这个功能对于用户体验性来说，挺不错的,用于实现类似百度的智能提示功能也是一个不错的选择。
jQuery-Suggest 是一个基于 jQuery 的 suggest 组件，它主要为 PC 端的搜索框提供建议词条。 为什么要做这个组件 我曾经做过一个基于 Zepto 简洁实用的 suggest 组件：。 这个组件稍微改造即可在 jQuery 下使用...
结合描述中的博客链接，我们可以推断这篇博客可能详细介绍了如何将Google Suggest的原理应用到jQuery Autocomplete插件中，为用户提供类似谷歌搜索那样的自动完成体验。博客作者可能分享了实现这一功能的步骤、代码...
jQuery Suggest插件是基于JavaScript库jQuery的一个组件，它提供了一种高效且灵活的方式来实现输入框的自动补全功能。该插件的核心功能是在用户输入文字时，根据预设的数据源实时展示匹配的建议列表，用户可以通过...
JavaScript Suggest自动补全的输入框下拉提示类是一种常见的前端开发技术，广泛应用于各种Web应用，如搜索引擎、表单输入、代码编辑器等。它为用户提供了一个方便、高效的交互体验，通过预测用户可能要输入的内容，...
**jQuery 实例5：仿 Google Suggest 自动补全** 在网页开发中，提供自动补全功能能够极大地提升用户体验，尤其是在搜索或者输入框输入时。Google 的搜索建议就是这一功能的经典应用，它能够根据用户输入的关键词...
jquery练习的例子，仿真google suggestjquery练习的例子，仿真google suggestjquery练习的例子，仿真google suggestjquery练习的例子，仿真google suggestjquery练习的例子，仿真google suggestjquery练习的例子，...
本主题主要聚焦于如何使用ASP.NET框架实现一个类似于Google Suggest的功能，即在用户输入文本时动态提供搜索建议。 【Google Suggest 简介】 Google Suggest是Google搜索引擎的一项功能，它在用户输入关键词时即时...
在本文中，我们将深入探讨AJAX技术在JavaScript库jQuery中的应用，特别是通过一个实战案例——仿谷歌搜索建议（Google Suggest）的自动补全功能。这个功能广泛应用于各种搜索框，能够极大地提升用户体验，使用户在...
谷歌建议（Google Suggest）是一项在线搜索功能，它在用户输入查询时实时提供可能的搜索建议。这个项目基于jQuery库实现，使得用户在输入框中输入中文时也能得到相关的搜索建议。jQuery是一个广泛使用的JavaScript库...
在本示例中，"ExtJs Google Suggest 动态查询效果" 是一个利用ExtJs实现的功能，它模仿了谷歌搜索框的自动建议功能。当你在搜索框中输入文字时，下拉列表会实时更新，显示与输入内容匹配的建议项。 首先，我们要...