搜索或选择时既可以输入又可以下拉选择

最近做一个功能要显示一个选择时要即可以输入又可以下拉选择，其实这种博客上例子特别多，学习整合了一下写了一个自己适用的。

核心

输入的时候@input事件，实时检索我们要查询的列表去获得对应数据，这里用到了indexOf方法，查找是否包含有某字符串，无返回 -1 。以及节流函数的使用，这个函数会在input事件触发的时候延时操作从而减少遍历数组的次数。

效果

代码

直接上全部代码，很简单不复杂，理清楚逻辑就懂了。（学习代码的时候一定要先理清楚逻辑哟）

<template>
  <div class="teamPage">
    <div class="top-chose">
      <span style="width:100px">请选择项目：</span>
      <el-input
        ref="input"
        size="small"
        v-model="searchKey"
        style="width:30%"
        placeholder="请先输入或选择项目..."
        clearable
        @input="throttle"
        @blur="inputBlur"
      >
        <template slot="append" >
          <img src="../../../public/images/selsect.png" style="padding:5px 10px" alt=""  @click="seleckClick"/>
        </template>
      </el-input>
      <ul v-if="isShowSearch" class="show-ui">
        <div v-if="searchList.length>0">
          <li v-for="(item, index) in searchList" :key="index" @click="liClick(item.name)">
            <!-- <span>{{ item.id }}</span> -->
            <span>{{ item.name }}</span>
          </li>
        </div>
        <div v-else>
          <span>暂无匹配项目</span>
        </div>
      </ul>
    </div>
  </div>
</template>

<script>

  export default {
    name:'',
    props:[''],
    data () {
      return {
      searchKey: '',
      prjList: [
        { id: 0, name: '项目1' },
        { id: 1, name: '项目2' },
        { id: 2, name: '项目3' },
        { id: 3, name: '项目4' },
        { id: 4, name: 'xxx项目1' },
        { id: 5, name: 'xxxabc项目2' },
        { id: 6, name: 'x项目3' },
        { id: 7, name: '项目5' },
      ],
      searchList: [],
      isShowSearch: false,
      statu: true,
 
      };
    },

    components: {},

    computed: {},

    beforeMount() {},

    mounted() {},

    methods: {
      search() {
      let _this = this
      _this.searchList = []
      //拿到当前input输入框输入的值
      _this.searchKey = _this.searchKey.trim()
      //判断展示ul列表，如果输入了就展示没输入就不展示
      if (_this.searchKey !== '') {
        _this.isShowSearch = true
      } else {
        _this.isShowSearch = false
      }
      _this.prjList.map((msg) => {
        //拿当前json的id、name、time去分别跟输入的值进行比较
        //indexOf 如果在检索的字符串中没有出现要找的值是会返回-1的，所以我们这里不等于-1就是假设输入框的值在当前json里面找到的情况
        if (msg.name.indexOf(_this.searchKey) != -1) {
          //然后把当前json添加到list数组中
          _this.searchList.push(msg)
        }
      })
    },

    //节流函数
    throttle() {
      var _this = this
      if (!_this.statu) {
        return
      }
      _this.statu = false
      setTimeout(function() {
        _this.search()
        _this.statu = true
      }, 200)
    },

    // 搜索框失去焦点的时候
    inputBlur(){
      let _this = this
      setTimeout(()=>{
        _this.isShowSearch = false
      },200)
    },

    //点击li
    liClick(name){
      let _this = this
      this.searchKey = name
      setTimeout(()=>{
        _this.isShowSearch = false
      },100)
    },

    // 下拉按钮
    seleckClick(){
      let _this = this
      _this.searchList=[]
      _this.searchList = _this.prjList
      if(_this.isShowSearch === true){
        _this.isShowSearch = false
      }else {
        _this.isShowSearch = true
      }
    },
    },

    watch: {}

  }

</script>
<style scoped>

.show-ui {
  margin-left: 90px;
  background-color: #f5f7fa;
  width: calc(30% - 21px);
  padding: 10px 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  max-height: 150px;
  overflow-y: auto;
}
.show-ui li{
  cursor: pointer;
  padding: 4px;
}
.show-ui li:hover{
  /* transform: scale(1.1); */
  background: #45b3d4;
  color: white;
}
.teamPage >>> .el-input-group__append,
.el-input-group__prepend {
  padding: 0;
  cursor:pointer;
}
.goToPrjCreate {
  text-align: left;
  margin-top: 20px;
  cursor: pointer;
  width: 90%;
}
.top-chose {
  text-align: left;
  width: 90%;
  margin: 0 auto;
  margin-top: 10px;

}
.teamPage{
  width: 98%;
  height: 96%;
  margin-left: 1%;
  /* margin-top: 1%; */
  background: #ffffff;
  overflow-y: auto;
}
</style>

代码是从我的代码里提出来的，所有如果有错误可以问我。 对你有用的话点个赞（^ . ^）