Jquery和ajax开发案例之---自动补全输入框

最新推荐文章于 2021-05-31 12:43:35 发布

zlcook

最新推荐文章于 2021-05-31 12:43:35 发布

阅读量3.4k

点赞数 1

分类专栏： jquery ajax java 前端框架文章标签： ajax jquery 自动补全输入框

本文链接：https://blog.csdn.net/zl594389970/article/details/24121095

版权

本文通过实例演示了如何利用Jquery和Ajax技术来创建一个自动补全输入框功能。详细讲解了HTML布局、Jquery脚本、后台控制类以及XML数据来源的实现步骤，附带了相关代码片段。

摘要由CSDN通过智能技术生成

案例(浮动窗口、动态股票信息、弹出菜单、可编辑的表格、自动补全输入框)下载地址：

http://download.csdn.net/detail/zl594389970/7218687

效果图：

html:代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=GBK">
		<title>JQuery实例：输入时自动提示</title>
		<script type="text/javascript"  src="js/jquery-1.3.1.js"></script> 
		<script type="text/javascript"  src="js/jqueryauto.js"> </script>
		
	</head>
	<body>
		Enter或点击：保存选择内容；鼠标移动或上下按键：选择保存内容<br/>
		自动补全输入框(只提示a或b开头)：<input type="text" id="word">
		<input type="button" value="提交" ><br/>
		<div id="auto"></div>
	</body>
</html>

jqueryauto.js代码：

//自动补全框
//表示当前高亮的节点
var highlightindex = -1;
$(document).ready(function() {
	var wordNode = $("#word");
	var offset = wordNode.offset();
	//自动补全框影藏
	var autoNode =$("#auto").width(wordNode.width()+4).css("position","absolute").css("left",offset.left)
	.css("top",offset.top+wordNode.height()+5+"p

最低0.47元/天解锁文章

zlcook

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
Jquery和ajax开发案例之---自动补全输入框

案例(浮动窗口、动态股票信息、弹出菜单、可编辑的表格、自动补全输入框)下载地址：http://download.csdn.net/detail/zl594389970/7218687
复制链接

扫一扫