Vue前端：几种搜索框功能实现

红太狼 2024-03-30 14:12 108阅读 0赞

#### Vue前端：几种搜索框功能实现 ####

*  前言
 *  一、搜索框输入内容自动检索
 *   *  （1）检索到输入新的内容后，就自动向后端发送查找请求（即时搜索）
     *  （2）一次请求搜索到所有可能需要的数据，然后根据搜索框中的内容进行数据过滤
 *  二、点击搜索按钮再开始搜索
 *  总结

--------------------

## 前言 ##

相信很多朋友遇到需要在网页上增加一个搜索框的功能，本文简单介绍两种搜索框的实现。  
**搜索框的功能一般分为：  
（1）即时检索，即搜索框输入内容自动检索，会随着搜索内容的不断输入，改变界面的显示  
（2）点击搜索按钮再开始搜索**

以下分别介绍这两种搜索框的简单实现方式。

--------------------

## 一、搜索框输入内容自动检索 ##

实现搜索框输入内容自动检索功能，可以再分为两种情况实现。

### （1）检索到输入新的内容后，就自动向后端发送查找请求（即时搜索） ###

这种设计，类似于现在的百度搜索，就是在搜索框输入一段内容后，会自动发起一次查找数据请求，界面自然就显示新的内容。  
**优点：**  
这种设计会显的很智能，不需要点搜索框即可检索，搜索起来更加快速高效，使用起来更加跟手。  
**缺点：**  
1）需要搜索的内容可能是一部分一部分输入的，每次搜索框新增内容就去搜索，往往不能得到真正想要的结果；  
2）如果分段输入搜索内容的次数过多，会导致请求服务器响应的次数过多，一个用户在完成一次有效的检索过程中，可能需要多次的请求服务器响应，服务器性能、网络资源等会被严重浪费，同时使用用户过多可能导致服务器响应较慢，严重会导致服务器崩溃。

**需要注意：** 即时检索在使用的时候为了不浪费过多资源，往往需要限制发请求的时间或者需要搜索的内容量，即每过一段时间或需要搜索的内容量达到一定条件才发送请求。

以下内容来自: [input搜索框实时检索功能实现][input]

参考代码：

methods: {
      //使用_.debounce控制搜索的触发频率
      //准备搜索
      search: _.debounce(
        function () {
          let that = this;
          //删除已经结束的请求
          _.remove(sources, function (n) {
            return n.source === null;
          });
          //取消还未结束的请求
          sources.forEach(function (item) {
            if (item !== null && item.source !== null && item.status === 1) {
              item.status = 0;
              item.source.cancel('取消上一个')
            }
          });
    
          //创建新的请求cancelToken,并设置状态请求中
          var sc = {
            source: axios.CancelToken.source(),
            status: 1 //状态1：请求中，0:取消中
          };
          //这个对象加入数组中
          sources.push(sc);
          //开始搜索数据，yourhttp替换成你自己的请求路径
          axios.get('yourhttp', {
            cancelToken: sc.source.token
          }).then(function (res) {
            //请求成功
            sc.source = null; //置空请求canceltoken
    
            //TODO这里处理搜索结果
            console.log(res.data);
            that.result = res.data;
    
          }).catch(function (thrown) {
            //请求失败
            sc.source = null; //置空请求canceltoken
    
            //下面的逻辑其实测试用
            if (axios.isCancel(thrown)) {
              console.log('Request canceled', thrown.message);
            } else {
              //handle error
            }
    
          });
        },
        500 //空闲时间间隔设置500ms
      )
    }

### （2）一次请求搜索到所有可能需要的数据，然后根据搜索框中的内容进行数据过滤 ###

**如果：**  
1）搜索框的内容相对固定，不像百度等网站需要对不同的搜索内容进行兼容，数据库整体数据量也不是很大  
2）服务器性能有限，希望尽量减少请求服务器响应次数

`我们可以采用一次请求搜索到所有可能需要的数据，然后根据搜索框中的内容进行数据过滤，显示需要的数据`  
为了实现这个效果，我们可以使用**Vue的Filter函数**进行数据的过滤。过滤器整体分为局部过滤器和全局过滤器。

**过滤器具体实现可以参考以下链接：** [Vue.js中过滤器（filter）的使用][Vue.js_filter]

**我这里再介绍一种过滤器的使用，是我目前在使用的方式，这种方式和链接中的使用方式不太相同，相对简单直接，看起来也很好懂，还能实现多页面的切换功能。**  
话不多说上代码！

result_Lists() {
      let start = (this.pageNo - 1) * this.pageSize; 	//定义显示的第一条数据编号
      let end = start + this.pageSize;		//根据起始编号和每页规定的显示数量，定义显示的最后条数据编号
      //返回经过过滤的数据
      return this.result.filter(item =>
      (item.content && item.content.includes(this.searchContent)) 
      ).slice(start, end);
      //简单介绍slice(start,end)：
      //方法可从已有数组中返回选定的元素，返回一个新数组，包含从start到end（不包含该元素）的数组元素。
    }

这种实现方式呢，我个人认为更加简单直接，很好懂，还能很好的配合多页面的切换，根据页面定义的每页显示的数据条数可以自动切换需要显示的数据数量。

## 二、点击搜索按钮再开始搜索 ##

点击搜索按钮再开始搜索应该是最常见、最普通、最简单的一种搜索方式。给搜索按钮绑定事件，点击搜索后向后端发请求，前端根据后端返回值在页面显示即可，这里不再赘述。

Vue前后端交互链接: [三、vue前后端交互（轻松入门vue）][vue_vue]

--------------------

## 总结 ##

本文介绍了几种搜索框常见的实现方式，特别推荐的是我在用的过滤器使用方式，实测很好用，很简单。  
希望对大家有用！

[input]: https://www.cnblogs.com/jpfss/p/11642162.html
[Vue.js_filter]: https://blog.csdn.net/fuhanghang/article/details/123874918?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522167276104716782428659820%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=167276104716782428659820&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-1-123874918-null-null.142%5Ev68%5Econtrol,201%5Ev4%5Eadd_ask,213%5Ev2%5Et3_control2&utm_term=vue%20filter%E8%BF%87%E6%BB%A4%E5%99%A8%E7%AD%9B%E9%80%89&spm=1018.2226.3001.4187
[vue_vue]: https://blog.csdn.net/qq_38723677/article/details/106718579?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522167276206316800213087483%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=167276206316800213087483&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-2-106718579-null-null.142%5Ev68%5Econtrol,201%5Ev4%5Eadd_ask,213%5Ev2%5Et3_control2&utm_term=vue%E6%90%9C%E7%B4%A2%E6%A1%86%E5%89%8D%E5%90%8E%E7%AB%AF&spm=1018.2226.3001.4187