因为项目中使用到了elementui所以利用了elementui的el-autocomplete组件来实现输入关键字弹出下拉列表

<template>
	<el-autocomplete
	style="width: 100%"
    class="inline-input"
    v-model="state"
    :fetch-suggestions="querySearch_front"
    placeholder="请输入内容"
    :trigger-on-focus="false"
    @select="handleSelect">
    </el-autocomplete>

<!-- 页面部分结构 --> 
	<div v-for="(item, index) in nginxServerData" :key="index">
       <el-collapse @change="handleChange(index)">
         <el-collapse-item ref="item" :title="item.name">
         </el-collapse-item>
       </el-collapse>
    </div>
</template>
export default {
	name: '...',
	data() {
		return {
			state: '',
			nginxServerData:requestData  // 这个requestData只是个占位符要换成自己的数据
		}
	},
	methods: {
		 // 输入框查询匹配
	    querySearch_front(queryString, cb) {
	      let restaurants = []
	      // 我后端请求回来的数据是个数组放在了nginxServerData的
	      for (let i = 0; i < this.nginxServerData.length; i++) {
	      // 因为列表框中的数据是必须要用value这个属性的 所以我这里做了处理
	        restaurants.push({'value': this.nginxServerData[i].name})
	      }
	      let results = queryString ? restaurants.filter(this.createFilter_front(queryString)) : restaurants
	      // 调用 callback 返回建议列表的数据
	      cb(results)
	    },
		createFilter_front(queryString) {
     	   return (restaurant) => {
       		 return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) > -1) 
       		 // 上面这里进行了全局查询所以indexOf条件是 > -1,如果要以开头匹配关键字的话直接把 > -1换成=== 0 就可以了
     		 }
   	 	},
		
		// 点击下拉列表关键字页面滚动到所在位置
		handleSelect(item) {
		// 获取每一个ref下的元素,得到的是数组
			let list = this.$refs.item
			list.map(el => {
				let arr = []
				// 打印el查看控制台发现下面的$options.propsData.title跟点击列表得到的参数item.value值是一致的(每个人需求不一样最好打印看下item下面有什么)
				arr.push(el.$options.propsData.title)
				let flag = this.contains(arr, item.value)
				if(flag) {
					// 匹配到的话就获取当前这个节点距离顶部的距离
					let top = el.$el.offsetTop
					document.documentElement.scrollTop = top
				}
			})
		}
		// 比较数组中是否有某字符串
		contains(arr, str) {
	      var i = arr.length
	      while (i--) {
	        if (arr[i] === str) {
	          return true
	        }
	      }
	      return false
	   },
	}
}
Logo

前往低代码交流专区

更多推荐