vue + flask 做一个全局搜索(左匹配和模糊搜索)

最新推荐文章于 2025-12-02 21:51:15 发布

原创

最新推荐文章于 2025-12-02 21:51:15 发布 · 3.4k 阅读

CC 4.0 BY-SA版权

一般来说全局搜索都是由后端负责逻辑的，由于最近想尝试下新的方向，就学着用vue来实现搜索，而后端接口只负责返回所有数据。该功能为在表格里面，搜索符合条件的字段，并重新渲染el-table的 :data=tableData,强行使符合条件的device被渲染出来。重点部门在代码每个method都有注释。
对于搜索框，我采用了el-autocomplete来实现，template的代码如下：

<template>
<div class="handle-box">
                <el-autocomplete
                 v-model="select_word"
                 clearable
                 placeholder="筛选关键词"
                 class="handle-input mr10"
                 :fetch-suggestions="querySearchAsync"
                 :trigger-on-focus="false"></el-autocomplete>
                <el-button type="primary" icon="search" @click="search">搜索</el-button>
                <el-button type="success" @click="reset">重置</el-button>
   </div>
   </template>

script方面的代码如下：

export default {
	data() {
		return  {
			select_word: '',
			searchList: [],
			 timeout:  null,
            search_result: ''
		}
	},
	mounted() {
			this.searchList = this.loadAll()
		},
	methods: {
			// 异步查询
			querySearchAsync(queryString, cb) {
		        var searchList = this.searchList;
		        var results = queryString ? searchList.filter(this.createFilter(queryString)) : searchList;
		        this.search_result = results

		        clearTimeout(this.timeout);
		        this.timeout = setTimeout(() => {
		          cb(results);
		        }, 1);
		      },
		 // el-autocomplete只接受value作绑定，所以后端返回数据的时候用value绑定设备的名字，
		 //后面做全局搜索的时候，不管输入什么，只会出来相应的设备的名字，
		 //但是该设备绑定其他的信息也可以被搜索到
        createFilter(queryString) {
        return (select_word) => {
	          return (select_word.value.toLowerCase().