首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue3表单搜索

vue3 表单搜索内容回显到地址栏的实例代码

2023-09-14 09:57:35 作者：饱饱~~

这篇文章主要介绍了vue3 表单搜索内容回显到地址栏的实例代码,地址栏输入内容回显到form表单,同理表单输入内容也要回显到地址栏中,本文结合实例代码介绍的非常详细,需要的朋友可以参考下

vue3 表单搜索内容回显到地址栏

地址栏输入内容回显到form表单，同理表单输入内容也要回显到地址栏中

<el-form :model="data">
    <el-form-item label="ORCHID:">
        <el-input
            type="text"
            v-model="data.orchId"
            placeholder="请输入ORCHID"
            @keyup.enter="handleSearch"
            clearable
          />
        </el-form-item>
    <el-form-item label="TASKID:">
        <el-input
            type="text"
            v-model="data.taskId"
            placeholder="请输入TASKID"
            @keyup.enter="handleSearch"
            clearable
          />
        </el-form-item>
    <el-form-item label="WORKFLOWID:">
        <el-input
            type="text"
            v-model="data.workflowId"
            placeholder="请输入WORKFLOWID"
            @keyup.enter="handleSearch"
            clearable
          />
    </el-form-item>
        <div>
          <el-form-item>
            <el-button class="btn-demo-item" @click="handleReset">重置</el-button>
            <el-button class="btn-demo-item" type="primary" @click="handleSearch"
              >查询</el-button
            >
          </el-form-item>
        </div>
    </el-form>

import { ref, watchEffect } from "vue";
import { useRoute, useRouter } from "vue-router";
let props = defineProps({
  modelValue: {
    type: Object,
    required: true,
  },
});
const data = ref({
  orchId: props.modelValue.orchId ?? "",
  taskId: props.modelValue.taskId ?? "",
  workflowId: props.modelValue.workflowId ?? "",
});
const route = useRoute();
const router = useRouter();
let emit = defineEmits(["search"]);
const handleReset = () => {
  resetForm(data.value);
  handleSearch();
};
const handleSearch = () => {
  router.push({ query: { ...route.query, ...data.value } });
  emit("search", data.value);
};
watchEffect(() => {
  data.value = {
    orchId: route.query.orchId || "",
    taskId: route.query.taskId || "",
    workflowId: route.query.workflowId || "",
  };
});

Vue3根据搜索框内容跳转至本页面指定位置

需求

需求：根据搜索框内容跳转至本页面指定位置

搜索框是我们在开发各类项目中出现率很高的一个"组件"，在element-plus中名为"自动补全输入框"，即我们可以根据输入的内容去检索列表或者表格或者其他本页面出现的元素，那我们应该如何去实现这个行为呢？

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表单搜索内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

vue3 表单搜索内容回显到地址栏的实例代码