模拟实现select效果,可搜索

html

<span>所属线路：</span>
<div class="rowline">
    <input size="small" class="containIpt" id="sellineName" v-model="searchingCondition.lineName" clearable @focus="isshowlist" @input="showListLine"></input>
    <i class="icon iconfont icon-chahao " @click="clearIpt"></i>
    </div>
    <div class="myel-select-dropdown" v-show="listLineUl" >
      <div class="myel-scrollbar">
          <div class="myel-select">
            <ul class="containlineul">
              <li @click="getCurrentLi(item,index)"  class="containLineli" :class="{'active':item.lineName}"  v-for="(item,index) in selectlineAllList" ><span>{{item.lineName}}</span></li>
            </ul>
          </div>
      </div>
  </div>

method

	//得焦点时显示下拉框，调用查询接口
   isshowlist(){
      this.listLineUl = true;
      this.listLineInfoNoPage(); 
   },
   //点击某个下拉选项，显示在input框中
   getCurrentLi(item,index){
      this.searchingCondition.lineName = item.lineName;
      this.listLineUl = false;
    },
    //根据输入值，实时查询所有数据
    showListLine(){
        this.listLineInfoNoPage()
      },

css

.rowline{
  display: inline;
  position: relative;
}
.icon-chahao{
  font-size: 13px;
  color: #dadada;
  position: absolute;
  right: 5px;
}
.containIpt{
   -webkit-appearance: none;
   background-color: #FFF;
   background-image: none;
   /* border-radius: 4px; */
   border: 1px solid #DCDFE6;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   color: #606266;
   display: inline-block;
   font-size: inherit;
   height: 32px;
   line-height: 32px;
   outline: 0;
   padding: 0 15px;
   -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
   transition: border-color .2s cubic-bezier(.645,.045,.355,1);
   width: 100%;
 }
 .myel-select-dropdown{
   position: absolute;
   z-index: 1001;
   border: 1px solid #E4E7ED;
   border-radius: 4px;
   background-color: #FFF;
   -webkit-box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
   box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   margin: 5px 0;

   min-width: 192px;
   transform-origin: center top;
   top: 137px;
   left: 270px
 }
 .myel-scrollbar{
   overflow: hidden;
   position: relative;
 }
 .myel-select{
   overflow: scroll;
   height: 100%;
   max-height: 274px;
   margin-bottom: -17px;
   margin-right: -17px;
 }
 .containlineul{
   list-style: none;
   padding: 6px 0;
   margin: 0;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
 }
 .containLineli{
   font-size: 14px;
   padding: 0 20px;
   position: relative;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   color: #606266;
   height: 34px;
   line-height: 34px;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   cursor: pointer;
}
.containLineli:hover{
  background-color: #F5F7FA;
}