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

Posted 2023-04-01 懂事的观众GPT

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

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

---

前言

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

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

---

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

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

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

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

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

以下内容来自: 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）的使用

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

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项目：旅游App-city：搜索框search和标签页Tabs

文章目录

• • 目标
  • 过程与代码
  • • 搜索框
    • • 初步
      • 自己实现取消功能
      • 样式修改
    • 标签页
  • 效果
  • 总代码
  • • 修改的文件
    • common.css
    • city.vue
    • main.js

目标

过程与代码

搜索框

初步

在Vant文档中找到搜索框：Search搜索

按照文档要求引入（如果以插件的形式安装vant就不用这样引入，详情见文档）

我们需要的是有搜索和取消功能的搜索框：

看懂代码后改写：

<template>
    <div class="city top-page">
        <!-- show-action:显示 “取消”  -->
        <van-search v-model="value" show-action placeholder="请输入搜索关键词" @search="onSearch" @cancel="onCancel" />
    </div>
</template>

<script setup>
import  ref  from 'vue';
import  showToast  from 'vant';

const value = ref('');
const onSearch = (val) => showToast(val);
const onCancel = () => showToast('取消');


</script>

<style lang="less" scoped>

</style>

效果：

自己实现取消功能

vant帮我们封装好了取消的功能。我们也可以通过route自己实现。

const onCancel = () => 
    // showToast('取消');
    cancelClick()


const route=useRoute()
function cancelClick()
    route.back()

样式修改

我们有细微的样式需要修改，比如：

• 搜索框要圆
• 搜索符号颜色

关于搜索框变圆：添加shape="round"

关于搜索符号的颜色：F12一下

是--van-search-left-icon-color。

由于一个项目里的颜色一般都会统一，因此，我们可以全局设置--van-search-left-icon-color。

在common.css中：

:root 
    /* 主题颜色 */
    --primary-color: #ff9854;
    /* 所有搜索框,有!important才会显示 */
    --van-search-left-icon-color:var(--primary-color) !important;

标签页

vant的标签页Tab：

看懂代码后改写：

步骤跟搜索框的差不多，详见总代码。

效果

总代码

修改的文件

common.css

通过全局修改来修改vant库的样式：

:root 
    /* 主题颜色 */
    --primary-color: #ff9854;
    /* 所有搜索框,有!important才会显示 */
    --van-search-left-icon-color: var(--primary-color) !important;
    /* 所有bottom下划线  */
    --van-tabs-bottom-bar-color: var(--primary-color) !important;


body 
    font-size: 14px;


/* 隐藏TabBar的类 */
.top-page 
    /* 占满整个屏幕 */
    height: 100vh;
    /* 有position，z-index才生效
     这里如果是absolute则不生效,可能与TabBar组件相关样式有关 */
    position: relative;
    /* TabBar的z-index默认1 */
    z-index: 9;
    /* 背景色挡住TabBar */
    background-color: #fff;
    /* y轴方向溢出:滚动条 */
    overflow-y: auto;

city.vue

<template>
    <div class="city top-page">
        <!-- show-action:显示 “取消”  -->
        <van-search shape="round" v-model="value" show-action placeholder="城市/区域/位置" @search="onSearch"
            @cancel="onCancel" />
        <van-tabs v-model:active="TabActive">
            <van-tab title="国内·港澳台">内容 1</van-tab>
            <van-tab title="海外">内容 2</van-tab>
        </van-tabs>
    </div>
</template>

<script setup>
import  ref  from 'vue';
import  showToast  from 'vant';
import  useRoute  from 'vue-router';

const value = ref('');
const TabActive = ref(0);
const onSearch = (val) => showToast(val);
const onCancel = () => 
    showToast('取消');
    // cancelClick()


// const route=useRoute()
// function cancelClick()
//     route.back()
// 
</script>

<style lang="less" scoped>

</style>

main.js

引入新的组件。在原有的基础上添加Tab, Tabs, Search即可。