支持备选项的标签控件

最新推荐文章于 2024-11-01 15:19:31 发布

wanghan1977

最新推荐文章于 2024-11-01 15:19:31 发布

阅读量230

点赞数

分类专栏： javascript html 文章标签： jquery html js

本文链接：https://blog.csdn.net/wanghan1977/article/details/107013936

版权

javascript 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

html

5 篇文章 0 订阅

订阅专栏

本文介绍如何使用HTML、JavaScript和jQuery创建一个具备备选项功能的标签控件。通过JavaScript实现动态添加和删除标签，jQuery用于增强交互体验。

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

<html>
	<head>
		<style>
			.label-container{
				vertical-align: middle;
				line-height: 40px;
			}

			.label-container a{display: inline-block; padding:0 20px 0 8px; position: relative; margin:0 4px; }
			.label-container a em{display:none; width: 16px; height: 100%; position: absolute; background: #f60;right: 0;top: 0;}
			.label-container a em:after{ content: "-"; color: #fff; font: bold 20px 'Microsoft Yahei';}
			.label-container a:hover em{ display: block; }
			a.label-add-input{display: inline-block;font: bold 20px 'Microsoft Yahei'; color: #2cac93}

			.label-list{
			    position: absolute;
			    top: 0;
			    left: 0;
			    z-index: 999;
			    background-color: white;
			    width: 100%;
			    border:1px solid #ddd;
			}

			.fm-button {
				display: inline-block;
				text-align: center;
				color: #000;
				height: 28px;
				line-height: 28px;
				font-size: 14px;
				padding: 0 1em;
				border: 1px solid #ddd; border-radius: 5px;
				border-radius: 3px;
				opacity: .9;
				filter: alpha(opacity=90);
			}

			a{text-decoration:none;}
			h3{color: aliceblue}

			#d1{
			    position: relative;
			}
			.d2{
			    width:200px;
			    border:1px solid #ddd;
			    display: none;
			    line-height: 30px;
			    position: relative;
			}
			.d2 ul{
			    margin:0px;
			    padding-left:0px;
			}
			.d2 ul li{
			    padding:2px 0 2px 12px;
			    font-weight: 300;
			    list-style-type: none;
			    border-bottom: 1px dotted #D4D4D4;
			}
			.d2 ul li:hover{
			    background-color: #D9EDF7;
			}
		</style>
		<script src="js/jquery-1.8.3.min.js"></script>
		<script>
			var Label = function(id, list){
			  var parentid = "#div_" +id;
			  var div = $(parentid);
			  div.html("");
				div.append('<input type="text" id="'+ id +'"/>');
				var label = $("#"+id),
				holder = $('<span class="label-container"></span>'),
				add = $('<a href="javascript:void(0)" class="label-add-button">+</a>'),
				labeldisplay = "",
				labelstore;
				
				label.hide().after(holder);
				holder.after(add);
				holder.after($('<span class="label-add-input" style="display: none;"><div style="display: inline-grid;"><input type="text" class="form-control label-search" style="width:200px" autocomplete="off"/><div class="d2" style="display: none;"><ul class="label-list"></ul></div></div></span>'));

				if(list && list.length > 0){
			      for(var i=0; i<list.length; i++){
			        labeldisplay += drawLabel($('<div/>').text(list[i].text).html());
			      }
			      holder.html(labeldisplay);
			      label.val(getLabelValue());
				}
				
				/*$.ajax({
				  type:"get",
				  url:"/getLabel.html",
				  async:false,
				  data:{'search_key':""},
				  success:function(result){*/
				  var result = '{"data":[{"id":"475845c1-b52a-11ea-8333-0050568b059c","text":"454434453"},{"id":"44fd0e20-b52a-11ea-8333-0050568b059c","text":"454545"},{"id":"42db73a4-b52a-11ea-8333-0050568b059c","text":"34234"},{"id":"40f2b3ae-b52a-11ea-8333-0050568b059c","text":"12123232"},{"id":"3e76b8c0-b52a-11ea-8333-0050568b059c","text":"123123123"},{"id":"39bfbbac-b52a-11ea-8333-0050568b059c","text":"12321"},{"id":"36ca1b00-b52a-11ea-8333-0050568b059c","text":"134"},{"id":"347fe052-b52a-11ea-8333-0050568b059c","text":"1234"},{"id":"31cc00e9-b52a-11ea-8333-0050568b059c","text":"123"},{"id":"2e96e1e3-b52a-11ea-8333-0050568b059c","text":"14"},{"id":"2b7a7fa6-b52a-11ea-8333-0050568b059c","text":"13"},{"id":"28add074-b52a-11ea-8333-0050568b059c","text":"12"},{"id":"2681b81d-b52a-11ea-8333-0050568b059c","text":"11"},{"id":"88fd2d66-aac5-11ea-8333-0050568b059c","text":"&lt;a href=&quot;1.com&quot;/&gt;1&lt;/"},{"id":"d286eec9-aabb-11ea-8333-0050568b059c","text":"33"},{"id":"cfed6130-aabb-11ea-8333-0050568b059c","text":"22"}]}';
					labelstore = JSON.parse(result).data;
				/*  }
			    });*/
			    
			    showAdd();

				var search = $(parentid+" .label-search");
				var input = $(parentid+" .label-add-input");
				
				// 标签删除
				holder.on('click','a>em',function(){
					$(this).parent().remove();
					label.val(getLabelValue());
					showAdd();
				});
				
				add.on('click',function(){
					$(this).hide();
					search.val("");
					input.show();
					search.focus();
				});
				
				search.on("focus input propertychange change",function(){
			        add.hide();
					$(parentid+" .d2").hide();
					$(parentid+" .label-list").html('');
					var str = "";
					var results = findLabel($(this).val());
					var str="",r,p,
					    v = $(this).val(),
					    results = findLabel(v);
				   	if(results.length > 0){
				 		for(var i=0;i<4 && i<results.length;i++){
				 		    r = results[i]
					  		str+='<li class="label-option" content="'+ r +'">';
					  		if(v){
					  		    p = r.indexOf(v);
					  		    str+=r.substring(0, p);
					  		    str+='<b>'+ v +'</b>'
					  		    str+=r.substring(p+v.length, r.length);
					  		}else{
					  			str+=r;
					  		}
					  		str+='</li>';
					  	}
				   	}else{
				   		str+='<li>未查询到数据</li>';
				   	}
				   	$(parentid+" .label-list").html(str);
				   	$(parentid+" .d2").show();
				});
				
				search.blur(function(){
				    input.hide();
			        setTimeout(function(){
			             showAdd();
			        }, 100);
			    });
			    
				$(parentid+" .label-list").on("mousedown", "li" ,function(){
					input.hide();
					holder.html(holder.html()+drawLabel($(this).attr("content")));
					label.val(getLabelValue());
					setTimeout(function(){
			            showAdd();
			        }, 100);
				});
				
				function findLabel(key){
			        var results = [];
			        var text = "";
			        if(labelstore && labelstore.length > 0){
			            for(var i=0; i<labelstore.length; i++){
			                text = labelstore[i].text;
					        if(text.indexOf(key) >= 0 && $.inArray($('<div/>').html(text).text(), label.val().split(",")) < 0){
					        	results.push(text);
					        }
					    }
			        }
			        return results;
				}
				
				function getLabelValue(){
			        var value = "";
			        $($(parentid+" .fm-button")).each(function(item, index){
						if(value != ""){
			        		value += ",";
						}
						value += $(this).text().trim();
					});
					return value;
				}
				   
				function drawLabel(value){
			   		return '<a class="fm-button" href="javascript:void(0)">'+value+'<em> </em></a>';
			   	}
			   	
			   	function showAdd(){
			   	    if(findLabel("").length > 0){
			            add.show();
			        }else{
			        	add.hide();
			        }
			   	}
			}
		</script>
	</head>
	<body>
		<div id="div_form_label"></div>
	</body>
	<script>
		Label('form_label');
	</script>
</html>