vue+iView 实现可输入的下拉框

需求：需要搞一个可以手动输入的下拉框。
问题：iview 自身的下拉框select可以输入筛选选择（输入内容仅限下拉框所包含数据），
但是iview 自身的下拉框select不能自己输入其他内容进行选中，从而实现搜索之类的功能。
实现思路：输入框结合使用iview 组件Dropdown实现：

主要实现点：

• 与input输入框的完美结合
• 无数据处理
• 数据超出处理
• 点击选中处理

一.效果

二.主要代码

template

        <FormItem prop="S_serviceCode_EQ" label="名称：">
           <Dropdown trigger="click" placement="bottom-start" :visible="isShowPanel" class="select-width" style="margin-top: 20px;">
                <a href="javascript:void(0)" @click="openPanel">
                 <Input v-model="condition.S_serviceCode_EQ" style="margin-top:-40px" class="select-width"  @click.native="openPanel" clearable  placeholder="请选择"/>
                </a>
                <Dropdown-menu slot="list" v-for="item in serviceByAdultList" :key="item">
                            <Dropdown-item  @on-click="getVal(item)" :class="{active:categoryIndex==item}">
                                <span style="font-size:14px;width:100%;display:block;" @click="getVal(item)">{{item}}</span>
                            </Dropdown-item>
                </Dropdown-menu>
                 <Dropdown-menu slot="list" v-show="serviceByAdultList==''||serviceByAdultList==null">
                        <Dropdown-item style="color:#C5C8CE;padding:0px;text-indent:50px;">
                            <span style="font-size:14px;">无匹配数据</span>
                        </Dropdown-item>
                </Dropdown-menu>
            </Dropdown>
        </FormItem>

data

     serviceByAdultList:[],
      isShowPanel:false,
      categoryIndex:"-1",

method

    getVal(item){
      if(item){
       this.categoryIndex = item
       this.$set(this.condition,"S_serviceCode_EQ",item)
      }
    },
    openPanel(){
       this.isShowPanel=!this.isShowPanel;
    },

css

 .active {
  color: #2d8CF0;
  background-color:#f3f3f3;
  font-size:14px;
  }
.ivu-dropdown /deep/.ivu-select-dropdown{
    max-height: none;
    overflow-y: auto;
    max-height: 190px;
}

完成。