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

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

主要实现点：

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

一.效果

二.主要代码

template

        
           
                
                 
                
                
                            
                                {{item}}
                            
                
                 
                        
                            无匹配数据
                        
                
            
        

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

完成。