jQuery实现输入框标签的自动添加和删除等操作

记录一下这两天写的。


实现如下对待选标签的操作

  • 点击待选标签列表中的标签,标签从原来的位置消失,出现在输入框中
  • 点击标签上的X图标或者按退格键删除已选的标签,被删除的标签会回到原来待选标签的位置
  • 输入框可以输入标签文字后按回车键、空格键或者输入框失去焦点时自动生成标签

截图展示

  • 部分效果图1:
    效果图1

  • 部分效果图1:
    效果图2


实现方案

界面方面

  • 首先要注意到,看上去输入框中出现的标签,实际上并不是在输入框中,而是在input之前通过添加span(标签)来实现,也就是说添加的标签事实上是在input之外的;
  • 通过外围的div包住input和span,设置边框,去掉input原来的表框,便造成视觉上的input的边框,添加的标签也出现在这个边框里;

如下代码:

  • html:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <div class="label_in">
    <p>产品类别<b>*</b>:</p>
    <div class="area">
    <div class="add">
    <input type="text" name="input" placeholder="输入标签..." />
    </div>
    <br class="clear" />
    </div>
    </div>
  • css:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    .area{
    width: 960px;
    border: 1px solid #a09d9d;
    }
    .add {
    float: left;
    line-height: 28px;
    overflow: hidden;
    border: none;
    }
    input {
    float: left;
    height: 28px;
    margin: 5px 0;
    padding-left: 12px;
    line-height: 28px;
    font-size: 18px;
    border: none;
    outline: none;
    }
    .clear{
    clear: both;
    }

jQuery实现功能方面

  • 标签点击事件。对整个标签列表进行绑定点击事件,注意要判断点击到span时候执行,否则点到margin(空白处)会将整个父节点作为目标。点击标签时,先复制clone()点击的span,在插入insertBefore()到input之前,并添加X图标;然后将原来的hide()(理论上也可以删除)。这里的num是原来在span标签里的排序位置,即index值,作为input之前标签的id,用于后面删除时,定位要显示的span,这个样就可以将标签恢复到原来位置。
1
2
3
4
5
6
7
8
9
10
//点击事件,点击标签选择,标签出现在输入框,原来位置隐藏
$(".label_type").click(function (e) {
var num = $(e.target).index();
var a = $(e.target).attr('class');
//判断点的不是空白地方(标签的父标签)
if (a != "label_type") {
$(e.target).clone().insertBefore($(".add input")).addClass("ad").attr('id', num).append("<b class='close'>ⓧ</b>");
$(e.target).hide();
}
});
  • X图标点击事件。将点击的那个span删除,在通过id定位原来的位置,将其show()显示出来。
1
2
3
4
5
6
7
8
//点击事件,点击X号时候删除标签,并在原来位置显示
$(".add").click(function (e) {
if ($(e.target).html() == "ⓧ") {
var numid = $(e.target).closest("span").attr('id');
$(e.target).closest("span").remove();
$(".label_type span").eq(numid).show();
}
});
  • 退格键的keyCode==8,执行删除操作。获取input之前的那个元素,并将其删除,同时通过id恢复原来的标签。这里要注意输入框中为空是执行,当输入框中有内容时正常删除操作。
  • 回车、空格以及输入框失去焦点都执行同一个操作。这里调用autocomplete()函数执行操作。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//按键事件
$(document).keydown(function (e) {
//获取输入框里的内容
var content = $("input").val();
//按下退格键时触发时间
if (e.keyCode == 8) {
//判断输入框里是否为空,为空时退格键触发删除标签
if (content == "") {
//获取里输入框最近一个标签的id,然后删除,并通过id定位到便签原来的位置并显示出来
var numid = $(".add input").prev().attr('id');
$(".add input").prev().remove();
$(".label_type span").eq(numid).show();
}
} else if (e.keyCode == 13 || e.keyCode == 32) { //回车键和空格键事件
//调用函数
autocomplete();
}
});
//输入框失去焦点时进行匹配生成标签
$("input").blur(autocomplete);
  • autocomplete()函数如下。这里对输入的标签通过for循环一个一个与标签列表进行匹配
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//遍历匹配生成对应标签
function autocomplete() {
var content = $("input").val();
//获取标签的总个数,用于遍历
var len = $(".label_type").children().length;
//遍历标签,判断输入的是否存在于标签了
for (var i = 0; i < len; i++) {
var con = $(".label_type span").eq(i).text();
//这里判断输入框里是否为空,并且进行匹配,输入只需要匹配到部分,方便输入
if (content != "" && con.match(content)) {
$(".label_type span").eq(i).clone().insertBefore($(".add input")).addClass("ad").attr('id', i).append("<b class='close'>ⓧ</b>");
$(".label_type span").eq(i).hide();
$("input").val("");
}
}
}

Demo和源码

效果展示:Demo
源代码地址

点击赞赏,您的支持将鼓励我继续创作!