ui组件——多选下拉input的实现（带有搜索功能）

先上效果图

废话不说 先看div层次结构

<!-- 最外层div 可以任意指定 主要用于定义子元素宽度 -->
        <div class="col-xs-10" style="width:800px">
          <!-- 表单label 添加文字提示 -->
          <label for="" class="label-control">全文检索</label>
          <!-- 多选承接div 以后会动态添加span -->
          <div class="hint-input-span-container">
            <!-- 表单元素 用来绑定监听事件以及接收用户输入 该层上方会动态添加span -->
            <input type="text" name="hint-search" value="" placeholder="选定关键字或按下tab或按下enter来分割关键字">
          </div>
          <!-- 包含下拉列表列 -->
          <div class="hint-block">
            <!-- 根据json数据包动态添加li -->
            <ul class="hint-ul">

            </ul>
          </div>
        </div>

dom结构注释已经能说得清楚了，下面来看css

* {
        box-sizing: border-box;
      }

      .hint-input-span-container {
        width:100%;
        background-color: #fff;
        border: 1px solid #ccc;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        display: inline-block;
        padding: 2px 4px;
        color: #555;
        vertical-align: middle;
        border-radius: 1px;
        max-width: 100%;