Vue3如何根據搜索框內容跳轉至本頁面指定位置

Posted on by

需求

需求：根據搜索框內容跳轉至本頁面指定位置

搜索框是我們在開發各類項目中出現率很高的一個"組件"，在element-plus中名為"自動補全輸入框"，即我們可以根據輸入的內容去檢索列表或者表格或者其他本頁面出現的元素，那我們應該如何去實現這個行為呢？

思路

整體過程是這樣的：

點擊輸入框的內容，頁面跳轉至指定的內容位置

實現過程

①首先我們必須要在頁面中引入自動補全輸入框組件

template部分
<el-autocomplete v-model="state1" :fetch-suggestions="querySearch" class="inline-input w-50"
	placeholder="搜索" @select="handleSelect" @change='change'>
</el-autocomplete>

srcipt部分
import { onMounted, ref } from 'vue'

interface RestaurantItem {
  value: string
  link: string
}
const state1 = ref('')
const restaurants = ref<RestaurantItem[]>([])
const querySearch = (queryString: string, cb: any) => {
  const results = queryString
    ? restaurants.value.filter(createFilter(queryString))
    : restaurants.value
  // call callback function to return suggestions
  cb(results)
}
const createFilter = (queryString: string) => {
  return (restaurant: RestaurantItem) => {
    return (
      restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
    )
  }
}
const loadAll = () => {
  return [
    { value: 'vue', link: 'https://github.com/vuejs/vue' },
    { value: 'element', link: 'https://github.com/ElemeFE/element' },
    { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
    { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
    { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
    { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
    { value: 'babel', link: 'https://github.com/babel/babel' },
  ]
}

const handleSelect = (item: RestaurantItem) => {
  console.log(item)
}

onMounted(() => {
  restaurants.value = loadAll()
})

需要解釋的是組件中的這個事件

select 點擊選中建議項時觸發

handleSelect 則是手動觸發選中建議事件

這一項是"點擊輸入框內容"

②根據選中的內容，在對應的表格中查找

const handleSelect = (item: RestaurantItem) => {
  console.log(item)
}

在這個函數中，我們可以log item，可以發現item就是loadAll中的內容，我們可以給loadAll裡的內容都綁定一個id值，例如

 { id:1,value: 'vue', link: 'https://github.com/vuejs/vue' },

然後我們在對應的表格的內容也添加一個id，這裡就不舉例瞭，至此，我們可以判斷，如果loadAll裡的id==表格裡某一項的id，那就是我們需要的對象

for(let i=0;i<表格長度;i++){
	let id = 表格[i].id
	if (item.id == 表格[i].id) {
	document.getElementById(id).scrollIntoView();
	}

③跳轉

document.getElementById(id).scrollIntoView();

整體的實現思路是：拿到搜索框選中的內容的id，與此同時給表格中的每一項內容都添加id，然後在select事件中，利用for循環去尋找搜索框id==表格內容id的對象，最後是利用scrollIntoView()方法進行跳轉

補充內容

需要補充的是，如何獲取到對應的元素？一是v-for循環，給每個對象添加id，格式是v-for = value in 表格 :id="value.id"
二是通過綁定ref函數獲取

總結

到此這篇關於Vue3如何根據搜索框內容跳轉至本頁面指定位置的文章就介紹到這瞭,更多相關Vue3跳轉指定位置內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：