顺丰物流单号查询效果（可输入多个文本框）

样式：
<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; /*
    min-width: 60px;
width: 100%;
*/
            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>

 

<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>

<div style="width: 500px">
        <div class="form-wrap">
            <div class="tokenfield form-control">
                <div class="token invalid" data-value="发送到发送到">
                    <span class="token-label" style="max-width: 251px;">发送到发送到</span><a href="#" class="close"
                        tabindex="-1">×</a></div>
                <div class="token invalid" data-value="吃的发送到发送到发送到发送到">
                    <span class="token-label" style="max-width: 251px;">吃的发送到发送到发送到发送到</span><a href="#"  class="close" tabindex="-1">×</a></div>
                <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>