基于Material实现可搜索的下拉框

需求

近期在使用Material的过程中遇到如下需求：需要实现可搜索的下拉框，并且点击选项实现赋值：

遍历Material的官方文档也没找到这个完整功能的api，找到了类似的下拉框：

于是就想基于这个官方文档的类似功能实现我们所需要的支持搜索的下拉框，下面贴上改造后的代码：

<template>
  <div class="addMembers">
    <div class="closeArea"
         v-show="isFocused"
         @click="changeFocused">

    </div>
    <ul>
      <li class="clearfix" v-for="(ite,ind) in overallArr">
        <div class="fl memberList membersLi">
          <div class="md-field md-theme-default"
               :class="{'md-focused md-highlight':ite[0].value!='' || ite[0].flag}"
               @click="allFalse();ite[0].flag = true;isFocused = true">
            <label for="country">{
   {
   ite[0].value?'角色':'请选择一个角色'}}</label>
            <div class="md-menu md-select">
              <input type="text" v-model="ite[0].value" name="country" readonly="readonly"
                     class="md-input md-input md-select-value">
              <i class="md-icon md-icon-font md-icon-image md-theme-default">
                <svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                  <path d="M7 10l5 5 5-5z"></path>
                  <path d="M0 0h24v24H0z" fill="none"></path>
                </svg>
              </i>
            </div>
          </div>
          <div class="selectList" v-show="ite[0].flag">
            <div class="search">
              <i class="fa fa-search fa-lg search_icon lmr cur"></i>
              <input type="text" class="search_input" placeholder="admin">
            </div>
            <div class="search_content">
              <ul class="zeroY">
                <li v-for="(item,index) in memberList" @click="changeValue(item,0,ind)">{
   {
   item}}</li>
              </ul>
            </div>