基于Material实现下拉框多选并且可点击“x”删除（Chips）

需求

近期在使用Material搭建一个后台系统，遇到一个如下需求：

功能需求如下：输入框获取焦点时弹出下拉框，下拉框同时支持多选，选中的值会以Material提供的chips的形式显示在输入框的前部，同时chips要支持可点击“x”删除，其实这个需求还是蛮常见的，就是一个支持模糊搜索的多选下拉框，但是我找遍了Material的官方文档也没找到这个功能的api或代码段，官方文档倒是有chips但是不支持下拉框，有下拉框但是不支持多选，有多选但是又不支持chips，只好自己手动把这三个功能实现在一起了。

实现

查看Material的官方文档很快就可以找到这样一个代码段：chips

功能与我们想要实现的需求有部分类似，于是我就想以这个官方功能为基础进行扩展，还需要扩展的功能如下：弹出下拉框，支持多选并赋值，同时失去焦点隐藏下拉框，话不多说，Show me the code：

<template>
  <div class="">
    <div class="closeArea"
         v-show="showCustomInput"
         @click="showCustomInput = false">

    </div>
    <div class="CustomInput">
      <div class="md-field md-theme-default"
           :class="{'md-focused':isFocus,'md-has-value':chipsArr.length!=0}">
        <label for="md-input-34pnj2lffo">成员</label>
        <div class="chipsIn">
          <md-chip
            v-for="item in chipsArr"
            md-deletable @md-delete="testCons">
            {
   {
   item.name}}
          </md-chip>
          <input
            @focus="inputFocusAction"
            @blur="inputBlurAction"
            type=&#