<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":"<a href="1.com"/>1</"},{"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>
|
转播
