模仿某丰的 快递单号输入
1、主要实现功能:
1、输入后,按回车进行分割。
2、点击x
后,删除当前选中。
3、获取输入列表数据
4、jsp回显
2、CSS样式
样式:
<style type="text/css">
a
{
background: transparent;
text-decoration: none;
}
.form-wrap
{
position: relative;
box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
border: 1px solid #e1e1e0;
}
.tokenfield
{
transition: min-height 120ms;
height: auto;
min-height: 87px;
max-height: 200px;
overflow-x: hidden;
overflow-y: auto;
box-shadow: none;
border: none;
background: none;
}
.tokenfield.form-control
{
padding: 7px;
}
.form-control
{
display: block;
width: 100%;
font-size: 13px;
line-height: 1.42857;
color: #333;
vertical-align: middle;
border-radius: 0;
}
.tokenfield .token.invalid
{
background: none;
border: 1px solid transparent;
border-radius: 0;
border-bottom: 1px dotted #b94a48;
}
.tokenfield .token
{
box-sizing: border-box;
display: inline-block;
margin: -1px 5px 5px 0;
vertical-align: top;
cursor: default;
padding: 0 7px;
height: 24px;
line-height: 24px;
font-size: 13px;
}
.tokenfield .token .token-label
{
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
font-size: 13px;
color: gray;
white-space: nowrap;
}
.tokenfield .token .close
{
margin-left: 0;
font-size: 15px;
}
.close
{
font-family: "Hiragino Sans GB" ,simsun, "Microsoft YaHei" ,sans-serif;
display: inline-block;
line-height: 24px;
}
.close
{
float: right;
font-weight: bold;
color: #000;
text-shadow: 0 1px 0 #fff;
opacity: 0.2;
filter: alpha(opacity=20);
}
.tokenfield .token-input
{
background: none;
border: 1px solid transparent;
line-height: 24px;
font-size: 13px;
box-shadow: none;
height: 24px;
padding: 0;
}
.tokenfield .token-input:focus
{
border-color: transparent;
outline: 0;
box-shadow: none;
}
.form-wrap .notice
{
color: #ccc;
font-size: 12px;
padding: 0 10px 5px;
}
</style>
3、js
<script language="javascript">
$(function () {
$("a.close").live("click", function () {
$(this).parent().remove();
return false;
});
$("input.token-input").keyup(function (event) {
var event = window.event || event;
if (event.keyCode == 13) {
if ($(this).val() != "") {
var strHTML = "<div class=\"token invalid\" data-value=\"" + $(this).val() + "\"><span class=\"token-label\" style=\"max-width: 251px;\">" + $(this).val() + "</span><a href=\"#\" class=\"close\" tabindex=\"-1\">×</a></div>";
$(this).val("");
$(this).before(strHTML);
$(this).focus();
}
}
});
});
</script>
4、html
<div style="width: 500px">
<div class="form-wrap">
<div class="tokenfield form-control">
<c:forEach var="item" items="${data.list}">
<div class="vin invalid" data-value="${item.value}">
<span class="vin-label" style="max-width: 251px;">${item.value}/span>
<a href="#" class="close" tabindex="-1">×</a>
</div>
</c:forEach>
<input type="text" class="token-input" autocomplete="off" placeholder="" id="1410764747876174-tokenfield" tabindex="0" style="min-width: 90px; width: 124px;">
<div class="notice">
最多可同时查询20条运单号,请以逗号、空格或回车键隔开。</div>
</div>
</div>
</div>
5、获取输入数据方法
function getInputData() {
var dataList = "";
for (let i = 0; i < $('.token-input').length; i++) {
if (i == $('.token-input').length - 1) {
dataList += ($('.token-input').eq(i).html());
} else {
dataList += ($('.token-input').eq(i).html()) + ",";
}
}
return dataList ;
}
6、回显数据
<c:forEach var="item" items="${data.list}">
<div class="vin invalid" data-value="${item.value}">
<span class="vin-label" style="max-width: 251px;">${item.value}/span>
<a href="#" class="close" tabindex="-1">×</a>
</div>
</c:forEach>