search/ input两种输入框输入值出现下拉选择并支持无接

项目中常用的输入框有两种

• search 搜索框
• input 输入框

1.search搜索框支持输入文本/支持模拟搜索/支持无接口模糊搜索

<template>
 <!-- 字段说明 -->
<!--@clear      在点击由 clearable 属性生成的清空按钮时触发-->
<!-- @change    仅在输入框失去焦点或选中拉下框内时触发 -->
 <!-- @blur     在 Input 失去焦点时触发 -->
 <!-- @keyup.enter.native   按下Enter(回车键触发) -->
 <!-- clearable       增加一键清除框内内容图标按钮 -->
 <!-- filterable      让搜索框支持字段输入-->
<el-select
            v-model="doctorName"
            placeholder="请输入"
            clearable
            filterable  
            @clear="selectClear"
            @change="selectChange"
            @blur='selectBlur'
            @keyup.enter.native="submit"
          >
            <el-option
              v-for="(item, index) in doctorNameList"
              :key="index"
              :label="item.doctorUserName"
              :value="item.doctorUserName"
            />
          </el-select>
<el-button size="small" plain icon="el-icon-search" @click="searchs">
</template>

<script>
export default {
data () {
    return {
        doctorName:'' // 搜索框值
        doctorNameList:[] // 假设这是下拉框内展示的数据列表
        dataList:[] // 假设这是表格要展示的数据列表
      }
    },
}
</script>

有接口并且支持模拟搜索只需传入框内值情况下

···
// this.getDoctorOpts()为重新获页面数据接口函数
methods:{
  // 删除值触发
    selectClear () {
      this.doctorName = ''
      this.$forceUpdate()
      this.getDoctorOpts()
    },
    // 框里值发生变化触发
    selectChange (val) {
      if (val === '') return false
      this.doctorName = val
      this.$forceUpdate()
    },
    // 失去焦点触发
    selectBlur (e) {
      this.doctorName = e.target.value
    },
    submit () {
      this.getDoctorOpts()
    }
  }
···

没有接口需前端自行解决模拟搜索情况下情况下
方式一利用includes()进行查找

···
methods:{
    // 搜索
    searchs () {
      this.querySearch()
      this.$forceUpdate()
    },
  // 删除值触发
    selectClear () {
      this.doctorName = ''
      this.$forceUpdate()
      this.querySearch()
    },
    // 框里值发生变化触发
    selectChange (val) {
      if (val === '') return false
      this.doctorName = val
      this.$forceUpdate()
    },
    // 失去焦点触发
    selectBlur (e) {
      this.doctorName = e.target.value
    },
    submit () {
     this.querySearch()
    }
  }
querySearch () {
let arr = {}
this.allUserList.forEach(item => {
if (item.name.includes( this.doctorName)){
    arr.push(item)
 }
})
    this.dataList=arr
    this.getDoctorOpts()
}
···

方式二利用find数组遍历进行查找(不推荐)

···
// find
querySearch () {
let arr = []
arr=this.allUserList.forEach(item => {
  const indexItem = this.allUserList.find(x = > x.name===this.doctorName)
 if (indexItem) {
      return {
          ...item
  }
  this.getDoctorOpts()
}
···

2.input框支持输入文本/前端自行支持模拟搜索/querySearch接口不支持模拟搜索

<template>
 <input
            size="small"
            class="from-item"
            v-model="doctorName"
            placeholder="请输入"
            @input="earch"
            @blur='removeBlue'
            clearable
          ></input>
          <el-card v-if="showList" class="card-item">
            <ul >
              <li v-for="(item,index) in hospitalList" :key="index" @click="selecsl(item)" @mouseover="txColor(index)" :class="{active: index===currentIndex}">{{item}}</li>
            </ul>
          </el-card>
<el-button size="small" plain icon="el-icon-search" @click="searchs">
</template>

<script>
data () {
  return {
  doctorName:'', // 输入框数据 
  hospitalList:[], // 下拉数据列表
  showList :false, // 控制数据列表显示/隐藏
  currentIndex: 0, // 选中的背景色
  timeout:false, // 因为是input做了防抖处理
  isable: false,
  dataList:[] // 假设这是表格要展示的数据列表
  }
},
 methods: {
    // 鼠标经过触发
    txColor (index) {
      this.currentIndex = index
    },
    // 输入值
    earch (value) {
      if (value === '') {
        this.showList = false
        return
      }
      if (this.timeout) {
        clearTimeout(this.timeout)
      }
      this.timeout = setTimeout(() => {
        thisdoctorName = value
        this.querySearch()
        this.showList = true
      }, 500)
    },
// 也是分两种，具体实现同上
    // 搜索
    searchs () {
      this.querySearch()
      this.$forceUpdate()
    },
    querySearch () {
    ···
    ···
  }
}
</script>

<style  scoped >
.active{
  background-color: #eee
}
.from-item{
  position: relative;
}
.card-item{
    height: 200px;
    overflow: auto;
    position: absolute;
    top: 30;
    left: 0;
    z-index: 99;
    width: 300px;
  }
</style>