`
xudongcsharp
  • 浏览: 477000 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

Jquery实现Google自动补全效果

GooglejQueryCSSAppleHTML 
阅读更多
HTML
<html>
  <head>
    <title>防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="jslib/jquery.1.3.2.js"></script>
<script type="text/javascript" src="jslib/jqueryauto.js"></script>
  </head>
 
  <body>
    仿Google自动补全<input type="text" id="word"/>
    <input type="button" value="搜索"><br/>
    <div id="auto"></div>
  </body>
</html>

JS：
//定义全局变量,表示当前高亮的节点
var highlightindex=-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);

//响应键盘按下事件
wordInput.keyup(function(event){
//处理文本框的键盘事件
var myEvent=event || window.event;
var keyCode=myEvent.keyCode;
//如果输入的是字母,应将最新的文本框值输送到服务器
//按下退格键或删除键也应获得最新响应数据
if(keyCode>=65 && keyCode<=90 || keyCode==8 || keyCode==46){
//1.首先获取文本框的值
var wordVal=$("#word").val();
var autoNode=$("#auto");
if(wordVal!==""){
//对上次未完成的延时操作进行取消
clearTimeout(timeoutId);
//延时操作,避免用户打字过快相关误操作,减轻服务端压力,采用延时加载的方法
timeoutId=setTimeout(function(){
//2.异步传值
$.post("autocomplete",{word:wordVal},function(data){
//将dom对象data转换成jquery的对象
var words=eval(data);
//清空上次的请求结果
autoNode.html("");
for(i in words){
//alert(words[i]);
//新建div节点  插入到结果div框中
var newDivNode=$("<div>").attr("id",i);
newDivNode.html(words[i]).appendTo(autoNode);

//增加鼠标进入事件,高亮节点
newDivNode.mouseover(function(){
//将原来高亮的节点取消
if(highlightindex!=-1){
autoNode.children("div").eq(highlightindex).css("background-color","white");
}
//记录新的高亮节点索引
highlightindex=$(this).attr("id");
$(this).css("background-color","red");
});

//增加鼠标移出事件,失去高亮
newDivNode.mouseout(function(){
$(this).css("background-color","white");
});

//双击鼠标自动补全
newDivNode.click(function(){
$("#word").val($(this).html());
autoNode.hide();
highlightindex=-1;
});
}
if(words.length>0){
autoNode.show();
}else{
autoNode.hide();
//弹出框隐藏的同时,高亮节点的值-1
highlightindex=-1;
}
});
},500);
}else{
autoNode.hide();
//弹出框隐藏的同时,高亮节点的值-1
highlightindex=-1;
}
}else if(keyCode==38 || keyCode==40){
//按上下键时对应操作
if(keyCode==38 ){
//向上
var auotoNodes=$("#auto").children("div");
if(highlightindex!=-1){
//如果原来存在高亮节点,则改为白色
auotoNodes.eq(highlightindex).css("background-color","white");
highlightindex --;
}else{
highlightindex=auotoNodes.length-1;
}
if(highlightindex ==-1){
//如果改完索引以后变为-1,则指向最后一个
highlightindex=auotoNodes.length-1;
}
//让现在高亮的内容变为红色
auotoNodes.eq(highlightindex).css("background-color","red");
}
if(keyCode==40 ){
//向下
var auotoNodes=$("#auto").children("div");
if(highlightindex!=-1){
//如果原来存在高亮节点,则改为白色
auotoNodes.eq(highlightindex).css("background-color","white");
}
highlightindex ++;
if(highlightindex == auotoNodes.length){
//如果改完索引以后变为-1,则指向最后一个
highlightindex=0;
}
//让现在高亮的内容变为红色
auotoNodes.eq(highlightindex).css("background-color","red");
}
}else if(keyCode==13){
//按下回车响应事件
//下拉框有高亮
if(highlightindex!=-1){
//取下拉框值
var comText=$("#auto").hide().children("div").eq(highlightindex).text();
highlightindex=-1;
//修改文本框值
$("#word").val(comText);
alert("你选择的"+comText+"的已经提交了");
}else{
//下拉框无高亮
alert("你选择的"+$("#word").val()+"的已经提交了");
$("#auto").hide();
//让文本框失去焦点
$("#word").get(0).blur();
}
}
});

//按钮点击事件
$("input[type='button']").click(function(){
alert("你选择的"+$("#word").val()+"的已经提交了");
});
})

服务器端代码：
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
PrintWriter out = response.getWriter();

String word=request.getParameter("word");
//模仿从数据库匹配数据
StringBuffer sb=new StringBuffer();
if(word.startsWith("a")){
sb.append("['array','application','apple']");
}
if(word.startsWith("b")){
sb.append("['button','busy','box','basket']");
}
if(word.startsWith("c")){
sb.append("['city','collection']");
}
out.println(sb);
}
分享到：
| Javascript keyCode键盘键码值表
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    改进版 jquery 仿百度谷歌自动补全输入（支持中文）

    标题“改进版 jquery 仿百度谷歌自动补全输入（支持中文）”涉及到的是一个基于jQuery的前端开发技术，旨在实现类似百度和谷歌搜索框的自动补全功能，而且这一版本特别优化了对中文字符的支持。在网页交互设计中，...

    jQuery实现自动补全功能

    在提供的压缩包文件"GoogleSuggest"中，可能包含了一个关于谷歌搜索建议的示例，它展示了如何使用jQuery UI Autocomplete来模拟谷歌搜索的自动补全效果。通过分析和学习这个示例，你可以更深入地理解如何与服务器...

    jquery模仿google自动补全案例

    我们将基于给定的"jquery模仿google自动补全案例"标题和描述，结合运行环境Tomcat，来构建一个完整的知识框架。 首先，jQuery是一个轻量级、高性能的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax...

    Jquery自动补全

    下面我们将深入探讨如何使用jQuery实现自动补全功能。 1. **基本原理**： - 当用户在输入框中输入字符时，通过`keyup`或`keydown`事件监听输入变化。 - 捕获到输入后，可以使用`.val()`获取当前的输入值，并以此...

    jquery实现的带有分页效果的仿google的自动补齐效果

    本项目是基于jQuery实现的一种带有分页功能的自动补齐效果，模仿了Google搜索的智能提示功能。这个功能对于提高用户体验，尤其是进行大量数据检索时，能够极大地提升输入效率。 首先，我们要理解“自动补齐”...

    仿谷歌百度实现输入自动补全功能

    本项目旨在仿照谷歌和百度的样式，实现一个具有高效、易用的输入自动补全功能。 首先，我们要理解自动补全的基本原理。该功能通常基于用户在输入框中键入的部分字符，快速提供可能的匹配项列表。这个过程涉及两个...

    AJAX jquery 模仿谷歌搜索自动补全功能

    在本教程中，我们将深入探讨如何使用AJAX和jQuery实现谷歌搜索式的自动补全功能。自动补全是一种增强用户体验的常见技术，它允许用户在输入查询时获得即时建议，极大地提高了搜索效率。以下是对实现这一功能所需的...

    jquery提示下拉框 仿Google自动补全框

    修改网上的代码完成的，使用jquery+JavaScript形式写的，服务端代码用java编写，当然你可以用其他任何语言编写。suggest是MyEclipse的一个工程，直接import既可用。也可以提取里面的文件自己修改

    传智播客Jquery实例(防google自动补全)

    总结来说，"传智播客Jquery实例(防google自动补全)"的课程涵盖了利用jQuery禁用浏览器的自动补全功能以及jQuery AJAX的基本使用，这些都是前端开发中非常实用的技术，对于提升用户体验和实现与服务器的无缝交互至关...

    AJAX学习总结（九）---Jquery实例：仿googlesuggest自动补全功能

    在本篇博客“AJAX学习总结（九）---Jquery实例：仿googlesuggest自动补全功能”中，作者分享了如何使用jQuery实现一个类似Google Suggest的自动补全功能，这是一种常见的前端交互设计，广泛应用于搜索框输入时提供...

    仿google自动补全

    实现仿谷歌自动补全的代码通常会涉及HTML用于构建基本结构，CSS用于样式设计，JavaScript（如jQuery或Vue.js等库）用于交互逻辑。在提供的文件列表中，`readme.txt`可能是关于如何使用这个自动补全功能的说明，而`...

    java与jQuery整合ajax仿googleSuggest自动补全实例

    本实例将探讨如何将这两者整合，通过AJAX技术实现一个仿Google Suggest的自动补全功能，该功能通常用于输入框中，为用户提供动态搜索建议。我们将详细解析这个实例中的各个组成部分。 首先，`index.jsp`是用户界面...

    jquery+flex+自动补全

    **自动补全实现原理** 1. **事件监听**：jQuery通过`keyup`或`input`事件监听用户在输入框中的输入行为，一旦检测到输入变化，就会触发后续的处理流程。 2. **数据请求**：当用户输入达到一定字符长度（例如3个...

    类google、baidu文本输入框自动补全

    本示例聚焦于实现类似Google和百度搜索框那样的自动补全功能，采用jQuery库来辅助开发。 jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理、动画效果和Ajax交互。在实现自动补全功能时，我们可以利用...

    模拟google自动补全功能

    标题中的“模拟google自动补全功能”指的是在Web应用程序中实现类似于Google搜索框的自动补全功能。这种功能能够提高用户输入效率，提供便捷的搜索体验。它基于Ajax（Asynchronous JavaScript and XML）技术，利用...

    ajax代码实现自动补全功能

    **Ajax技术实现自动补全功能** Ajax（Asynchronous JavaScript ...通过以上步骤，我们可以实现类似Google的自动补全功能。然而，实际项目中还需要结合具体业务需求，进行更复杂的优化和调整，以提供更优质的用户体验。

    Jquery实现仿搜索引擎(百度、谷歌)文本框自动补全插件

    在本文中，我们将深入探讨如何使用jQuery来实现一个仿照百度和谷歌搜索引擎的文本框自动补全插件。这个插件的主要目标是提供用户友好的输入体验，通过预测和建议可能的搜索词来提高搜索效率。 ### jQuery简介 ...

    类似百度、谷歌的自动补全

    这个"类似百度、谷歌的自动补全"Demo展示了一个如何实现这种功能的方法，主要利用了JavaScript库jQuery。在本文中，我们将深入探讨自动补全的工作原理、jQuery在其中的角色，以及如何构建类似的实现。 自动补全的...

Magicbox
Global site tag (gtag.js) - Google Analytics