vue结合elementui实现输入框输入关键词显示下拉列表点击列表中关键字页面滚动到关键字所在位置

因为项目中使用到了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
	   },
	}
}