jquery点击文本框提示标签自动补全_关键字标签value值提交代码



156 622 208



特效描述:点击文本框 文本框提示标签 标签自动补全 键字标签 value值提交,用jquery实现了标签自动补全特效,功能代码很简单,非常实用。 包括了以下功能 1、与后台交互生成自动补全交互; 2、按回车自动完成; 3、点击选中标签提示删除; 4、遇到重复标签会自动提示(带动画闪烁效果)。。。

代码结构

1. 引入CSS

<link href="css/custom-theme/jquery-ui-1.8.7.custom.css" rel="stylesheet" />
<link href="css/jquery.taghandler.css" rel="stylesheet" />

2. 引入JS

<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery-ui-1.8.20.custom.js"></script>
<script src="js/jquery.taghandler.js"></script>

3. HTML代码

<div style="width:620px;margin:40px auto 0 auto;text-align:center;">
	<ul id="tags"></ul>
	<input id="btnConfirm" type="button" value="提交" />
</div>
<script>
	var origtags = '最ACG,漫画,动漫,acg';
	var newstags = origtags.split(',');
	var arr = new Array(); //将标签放入arr 数组中
	for (var i = 0; i < newstags.length; i++) {
		arr[i] = newstags[i];
	}
	jQuery(document).ready(function () {
		$('#tags').tagHandler({
			assignedTags: arr, //原有标签,若没有,可以直接写 []
			availableTags: ['动漫', '音乐', '素材', '代码'],//用于自动补全的数据,可从后台获取
			autocomplete: true, //自动补全功能,true为有提示,false则反之
			onAdd: function (tag) {
				var addflag = true, tags = $('#tags').tagHandler("getTags");
				jQuery.each(tags, function (i, e) {
					if (tag.toUpperCase() === e.toUpperCase()) {
						$('#tags').find('.tagItem').each(function () {
							if ($(this).html().toLocaleUpperCase() === tag.toLocaleUpperCase()) {
								$(this).animate({ opacity: 0.55 }).delay(20).animate({ opacity: 1 }).animate({ opacity: 0.55 }).delay(20).animate({ opacity: 1 });
							}
						});
						addflag = false;
					}
				});
				return addflag;
			}
			,
			onDelete: function (tag) { //删除操作
				var addflag = false;
				var answer = confirm("您确定删除此标签?");
				if (answer) {
					addflag = true;
				}
				return addflag;
			}
		});
	});
	$(function () {
		$("#btnConfirm").click(function () { //提交按钮操作
			var getTag = $('#tags').tagHandler("getTags");
			alert(getTag);
		});
	});
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 图片头像上传 文件上传 文本框 下拉框 复选 单选 登录框 注册框 搜索框 验证码 二级联动 三级联动 城市选择 value赋值 筛选 按钮控制 购物车 颜色选择 表单提交 全选/反选 添加删除 添加标签 密码强度验证 表单验证 html5按钮动画 按钮样式 密码修改设置 切换按钮 form表单

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到