【贴标签】jquery实现添加标签及搜索功能

新冠当前，中国加油，世界加油！

目录

1.需求目的：

2.实现效果：

3.实现方式

4.升级jquery版本后出现的.live方法已过时问题

---

1.需求目的：

最近要实现一个类似CSDN写博客添加标签的贴标签功能，找来找去

在jquery插件库中找到一款比较好改的作品：http://www.jq22.com/jquery-info7340

2.实现效果：

1.点击下方标签，将添加到input框上方

2.在搜索框中输入文字，搜索已有标签，enter添加到input框上方

3.实现方式

1.具体demo代码已在GitHub开源分享，代码地址：https://github.com/Damionew/jQueryLabel.git

2.主要修改即是两个：

一：修改了输入框下方样式，使用了Bootstrap中的标签页nav

主要代码：

<!--标签页实现header-->

<ul class="nav nav-tabs">
	<li class="active"><a href="#recommend" data-toggle="tab"><span>推荐</span></a></li>
	<li class=""><a href="#2" data-toggle="tab"><span>客户</span></a></li>
	<li class=""><a href="#3" data-toggle="tab"><span>技术</span></a></li>
</ul>

<!--标签页实现body-->
<div class="tab-pane active" id="recommend">
	<div id="mycard-plus">
		<div class="default-tag tagbtn">
			<div class="clearfix">
				<a value="-1" title="电信" href="javascript:void(0);"><span>电信(666)</span><em></em></a>
				<a value="-1" title="Java" href="javascript:void(0);"><span>Java(199)</span><em></em></a>
				<a value="-1" title="集客" href="javascript:void(0);"><span>集客(55)</span><em></em></a>
			</div>
		</div>
	</div>
</div>
<!--主要是header内li中a标签内href和body内id的联动-->

二：将原input输入新增标签改为搜索标签，因为在管理系统中，标签不应是随意增加的，或者说应是有权限地增加的。

搜索功能使用的Bootstrap中typeahead，参考 Twitter bootstrap模糊查询插件

主要代码：

<!--输入框-->
<input id="demo1" type="text" class="form-control" placeholder="Search cities..." autocomplete="off" />
<!--响应事件及选中事件（增加标签）-->
$('#demo1').typeahead({
	source: [
		{ id: 1, name: '语文' },
		{ id: 2, name: '数学' },
		{ id: 3, name: '英语' },
		{ id: 4, name: '物理' },
		{ id: 5, name: '化学' },
		{ id: 6, name: '体育' },
		{ id: 7, name: '地理' },
		{ id: 8, name: '政治' }
	],
	itemSelected : optionSelected
});
function optionSelected(item, val, text){
	var a=$(".plus-tag");
	a.append($("<a "+text+' title="'+text+'" href="javascript:void(0);" ><span>'+text+"</span><em></em></a>"));
}

4.升级jquery版本后出现的.live方法已过时问题

原版本为1.7.1，升级到最新版本会报.live方法已过时问题，官方介绍改为.on方法

var a=$(".plus-tag");
<!--原live写法-->
$("a em",a).live("click",function(){
	var c=$(this).parents("a"),b=c.attr("title"),d=c.attr("value");
	delTips(b,d)
});
<!--新on写法-->
a.on("click","a em",function(){
    var c=$(this).parents("a"),b=c.attr("title"),d=c.attr("value");
	delTips(b,d)
});
<!--语法-->
$(selector).on(event,childSelector,data,function)
<!--
    selector：$(".plus-tag")即a
    event：click
    childSelector："a em"
    data：可省略
-->

小结：具体情况应针对不同的项目，需求分析，比如目前为止还需点击按钮，弹出框，点击确定并将已选标签显示到标签栏上等。

最终效果图：

最后再道一声，加油，相信今天不是最后一天，请好好爱这世界！