xml.jsp代码
<%@ page contentType="text/xml;charset=UTF-8" language="java" %>
<words>
<word>1</word>
<word>12</word>
<word>123</word>
<word>1234</word>
<word>123456</word>
<word>1234567</word>
</words>
html代码
<html>
<head>
<title>Ajax谷歌自动补全仿制</title>
<script type="text/javascript" src="jslib/jquery.js"></script>
<script type="text/javascript" src="jslib/auto.js"></script>
</head>
<body>
自动补全<input type="text" id="word"/><input type="button" value="提交">
<br> <br><br>
<div id="auto"></div>
</body>
</html>
jslib/auto.js
（添加css属性也添加进了js代码中）
var gaoliang = -1;
$(document).ready(function() {
var wordInput = $("#word");
var offset = wordInput.offset();
$("#auto").hide()//初始化隐藏补全框
.css("border", "1px black solid")
.css("position", "absolute")
.css("top", offset.top + wordInput.height() + 5 + "px")
.css("left", offset.left + "px")
.width(wordInput.width());
$("#word").keyup(function(event) {//输入框添加键盘监听事件
var ev = event || window.event;
var evCode = ev.keyCode;
if (evCode >= 65 && evCode <= 90 || evCode == 8 || evCode == 46) {
var wordText = $("#word").val();
if (wordText.length > 0) {
$.post("xml.jsp", {word:wordText}, function(data) {
var obj = $(data);//接受的xml数据变成jquery对象
var wordNodes = obj.find("word");//查找xml数据中word节点的值
var auto = $("#auto");
auto.html("");
wordNodes.each(function() {//遍历数组
var wordNode = $(this);
$("<div>").html(wordNode.text()).appendTo(auto);//遍历到的值，添加进补全框
});
if (wordNodes.length > 0) {
auto.show();
} else {
auto.hide();
gaoliang = -1;
}
}, "xml");
}
} else if (evCode == 38 || evCode == 40) {
if (evCode == 38) { //向上
var autoNodes = $("#auto").children("div");
if (gaoliang != -1) {//是否高亮补全框中div，全局状态变量gaoliang
autoNodes.eq(gaoliang).css("background-color", "white");//补全框div高亮
gaoliang--;
} else {
gaoliang = autoNodes.length - 1;
}
if (gaoliang == -1) {
gaoliang = autoNodes.length - 1;
}
autoNodes.eq(gaoliang).css("background-color", "red");
}
if (evCode == 40) { //向下
var autoNodes = $("#auto").children("div");
if (gaoliang != -1) {
autoNodes.eq(gaoliang).css("background-color", "white");
}
gaoliang++;
if (gaoliang == autoNodes.length) {
gaoliang = 0;
}
autoNodes.eq(gaoliang).css("background-color", "red");
}
}
else if (evCode == 13) { //回车提交
if (gaoliang != -1) {
var conText = $("#auto").children("div").eq(gaoliang).text().hide();
gaoliang = -1;
$("#word").val(conText);
} else {
alert("提交的内容为:" + $("#word").val());
}
}
});
$("input[type='button']").click(function() {
alert("提交的内容为:" + $("#word").val());
});
});
分享到：
相关推荐
标题“改进版 jquery 仿百度谷歌自动补全输入（支持中文）”涉及到的是一个基于jQuery的前端开发技术，旨在实现类似百度和谷歌搜索框的自动补全功能，而且这一版本特别优化了对中文字符的支持。在网页交互设计中，...
在提供的压缩包文件"GoogleSuggest"中，可能包含了一个关于谷歌搜索建议的示例，它展示了如何使用jQuery UI Autocomplete来模拟谷歌搜索的自动补全效果。通过分析和学习这个示例，你可以更深入地理解如何与服务器...
jQuery文本框联想补全自动完成插件是一款非常实用的前端开发工具，它可以帮助开发者在网页的输入框中实现智能联想和自动补全功能。这个插件基于JavaScript库jQuery构建，因此，使用它之前需要确保项目中已经引入了...
**jQuery实现Google自动补全效果** 在Web开发中，用户输入的实时提示功能，也称为自动补全（Autocomplete）或智能搜索，极大地提升了用户体验。本篇将介绍如何使用jQuery库来实现类似Google搜索那样的自动补全效果...
"jquery实现自动补全"是利用jQuery来创建一个功能强大的输入框，当用户输入文本时，系统会自动提供可能的匹配项，这种功能常用于搜索引擎、地址输入、用户名建议等场景，极大地提高了用户体验。 自动补全...
**jQuery自动补全插件详解** 在Web开发中，用户界面的交互性和便捷性是提升用户体验的关键因素之一。其中，自动补全功能是一项常见的需求，它可以在用户输入时提供预测建议，大大加快输入速度，降低错误率。jQuery...
**jQuery自动补全插件详解** jQuery 自动补全插件是一种常见的前端开发工具，它为用户在输入框中提供动态建议，提高了用户体验，尤其在处理大量数据输入时显得尤为重要。本示例将涵盖如何使用jQuery实现自动补全...
**jQuery Combobox自动补全**是一种常见的前端交互组件，它结合了输入框和下拉列表的功能，为用户提供方便的数据选择和快速输入体验。这个组件在网页应用中广泛使用，尤其适用于需要用户从大量预定义选项中进行选择...
在本文中，我们将深入探讨如何使用jQuery实现一个文本框自动补全的功能，这对于提升用户输入体验，尤其是在处理大量可选项时非常有用。我们将基于提供的文件`autoComplate.html`、`jquery-1.5.js`、`uuAutoComplete....
本文将深入探讨如何利用jQuery实现自动补全功能，特别是针对邮箱、城市和中文的自动补全场景。 首先，让我们了解jQuery UI中的Autocomplete插件。这个插件允许开发者基于用户输入的字符动态提供建议列表。要使用它...
jQuery百度搜索自动补全插件基于流行的JavaScript库jQuery和typeahead.js实现，为网页上的搜索框提供了高效且用户友好的自动补全功能。这个插件主要用于提升用户体验，尤其是在需要处理大量数据并希望用户能快速找到...
jQuery自动补全是一种常见的前端开发技术，用于提升用户体验，特别是在搜索框或输入字段中，它能够根据用户输入的内容实时提供预测建议。这个功能在许多网站和应用中都有所应用，如百度搜索、谷歌搜索等。它能够帮助...
Asp.net与jQuery结合实现的自动补全功能（autocomplete）是一种常见的前端交互设计，它能够极大地提高用户在输入框中的输入效率。此功能通常应用于搜索框、表单填充等场景，为用户提供动态提示，根据他们输入的部分...
《jQuery标签自动补全特效源码解析》 在网页开发中，用户输入的标签自动补全功能已经成为一种常见的交互设计，极大地提升了用户体验。本资源"jquery标签自动补全特效源码.zip"提供了一套基于jQuery实现的标签自动...
**jQuery自动补全插件详解** 在Web开发中，用户输入常常是交互体验的重要环节，为了提高用户体验，很多网站和应用引入了自动补全（Autocomplete）功能。jQuery作为一个广泛使用的JavaScript库，提供了丰富的插件...
jQuery 自动补全搜索框控件是Web开发中常用的一种功能，它极大地提高了用户体验，尤其在需要用户输入关键字进行查询的场景下。该控件基于jQuery库，通过实时匹配用户输入，动态显示一个建议列表，帮助用户快速找到...
在本文中，我们将深入探讨如何使用jQuery来实现一个模仿Google搜索的自动补全功能。这个功能常见于许多网站，能够极大地提升用户体验，帮助用户快速找到他们想要搜索的关键词。我们将基于给定的"jquery模仿google...
本示例为jquery自动补全的示例，其中包括两部分，第一是在本地构造的json格式的数据供自动补全用，第二是从后台将数据处理成json格式，jquery通过ajax请求后台的json数据，其中还有处理autocomplete不支持中文的方法...
在本文中，我们将深入探讨如何使用jQuery实现一个基于Ajax的文本框自动补全功能，以及相关的`autocomplete`插件的完整实例。这个功能在许多Web应用程序中非常常见，它能够提高用户输入的效率和用户体验。 首先，让...
jQuery Suggest插件就是这样一个工具，它为网页中的输入框提供了自动补全功能，使得用户在输入时能快速找到并选择所需的内容，大大提高了输入效率。本篇文章将深入探讨jQuery Suggest插件的使用方法、原理以及如何...