本文由體驗技術團隊陳家梅原創。
我不太喜歡嚴肅的表達，所以本文描述比較個人化，也希望大家可以放鬆，跟隨本文的思路聯想起來。
好了，瞭解一個東西離不開哲學三問：是什麼？怎麼來的？用來幹什麼？所以主要從這三方面展開描述， 我們將詳細介紹 TinyVue 組件庫的searchBox組件的功能特性。
這裏建議大家進入 SearchBox 文檔地址，跟着本文操作效果更佳，文檔地址：https://opentiny.github.io/tiny-search-box
searchbox是什麼？
1、長什麼樣？就一個輸入框。
2、這個輸入框與正常輸入框的區別？
上圖！
圖解步驟：
一頓操作，輸入框裏多了個標籤。
外形上的區別：多了類似於級聯面板的下拉框，這就是searchbox了。
3、為什麼叫綜合搜索組件?
“綜合”和“搜索”兩個關鍵詞就概括了此組件孵化的背景和環境。
input和search、select等常見的輸入框，場景單不單一？用的時候搜索類別不同還得自己動手差異化配置，甚至單個頁面就用到六七個input和search，有點像“七年之癢”，
回憶下日常生活，這麼和ta朝夕相處下來，你是不是也想尋求改變了？我説的是輸入搜索組件。
用户和開發者對輸入框的使用場景向設計師提出了更高要求：“我們要把這些組件的能力都綜合到一個組件裏面，實現搜索功能”
此組件出來的來源就搞清楚了：集各種搜索需求場景於一身。
使用場景
不用我説，大家跟着我上面的思路都能根據自己以往的經驗瞭解到這個組件的一些使用場景，所以請大家先回憶下以往使用input、search和select等組件的時候；
好！開始回憶！
閉上眼，看見天堂...。房間裏有個形象氣質極佳的人戴着耳機聽着歌（沒錯就是你），手指飛快在vscode裏面輸入<input ... />。
嘴裏默唸着：“產品又提需求，又要增加多一列的搜索過濾條件；之前輸入關鍵字，只需按照表格中的某一列的數據檢索就夠了，現在這一個輸入框怎麼做啊？還有5分鐘就下班了”。。。
好！打住。
1、使用場景一
根據表格不同列的數據，選中符合多重列條件的行數據。
舉個例子：用户想在下面表格裏找出：華南區的所有名稱含有“科技”字眼的公司；
普通input怎麼做呢？searchbox又會怎麼做？話不多説上圖：
普通的input做法：
以上做法大家明顯都能看出來了，不止對用户不友好，而且侷限性很大。
再來看看searchbox，對用户來説，searchbox只需要點擊兩下，出現這兩個標籤，即可完成篩選過濾。對開發者來説：也只需要那隻標籤值，編寫一下表格的行過濾算法即可。
2、使用場景二
來呀，上圖
像場景一的幾個關鍵字搜索條件，或許還可以通過select組件完成；
但是，當用户想通過大小、時間範圍篩選，此時開發者又能怎麼做呢？
用户在使用時，可不會想到自己要手動輸入“≥、≤或者2025/02/21 10:00:00 - 2025/03/01 00:00:00“等關鍵字。
這對用户來説不僅是一種折磨，對我們開發人員來説，如何識別，分割這個關鍵字也是一個頭疼的事......
“誒！不如一股腦交給後端來處理吧。或者額外增加一個時間選擇器組件、大小輸入組件。用户的筆記本電腦屏幕雖小一點，但空間，擠擠總會有的”。
產品同事的關又過不了了。
但是當我們擁有searchbox
圖解步驟：
- 選擇大小
- 選擇日期：
情況就完全不一樣了，是不是很酷。
3、場景三、四......
相信大家在業務開發過程中遇到類似或相關的場景還有很多，這個就留給大家自己去回憶了，你們最有發言權。
怎麼用？
説了這麼多，怎麼用呢？很簡單！
兩步走：安裝 ->使用 即可。
1、安裝：參考官網文檔（https://opentiny.github.io/tiny-search-box/usage）
// 命令行安裝
npm i @opentiny/vue-search-box
import Vue from 'vue';
import TinySearchBox from '@opentiny/vue-search-box';
// 在文件主入口引入樣式：
@import '@opentiny/vue-search-box/dist/index.css';
Vue.use(TinySearchBox);2、使用：基礎用法
來，狠狠點他：hhttps://opentiny.github.io/tiny-search-box/examples/basic-usage
<script setup lang="ts">
import { ref } from 'vue'
const tags = ref([])
const items = ref([
{
label: '大小',
field: 'size', // 此篩選條件的唯一標識符
type: 'numRange', // 指明大小範圍類型的篩選類型
unit: 'GB', // 還有單位
start: 1, // 最小值的默認賦值
min: 1, // 最小值的限制是1
max: 100 // 最大值的限制是100
}
])
</script>
<template>
<tvp-search-box v-model="tags" :items="items" />
</template>好好好，來看看效果
圖解步驟：
能看到這，只想悄悄告訴你，已經到了快説再見的時候了；
但組件能力遠不止如此，最後的小部分篇幅我們讓組件的部分功能特點亮個相。
組件的能力和優勢？
除了正常的過濾搜索功能外，searchbox還增加了哪些實用的技巧？
1、快速切分生成多個標籤
適用場景：一鍵篩選多個條件
圖解步驟：
2、屬性分組
適用場景：區分前後端索引分組，前端和後端搜索都有需求
3、可編輯
適用場景：用户臨時想修改篩選條件，但又不想刪除此篩選條件後，再重新選擇。
圖解步驟：
4、智能識別
適用場景：智能識別用户輸入的是哪一種篩選條件
圖解步驟：
5、合併標籤
適用場景：將多個用一類型的篩選條件合併為一個標籤
圖解步驟：
特色功能：
1、控制用户可選擇的時間跨度
適用場景：給後端檢索功能縮小範圍，限制用户可選擇的時間跨度。
2、自定義二級下拉麪板的功能樣式
適用場景：靈活開發
3、自由組合面板
適用場景：已有功能+靈活開發：即想使用組件原有的面板，又想加上自己定義的面板樣式。
總結：
終於到了説再見的時候，這篇文章是否讓你初步瞭解了searchbox這個應運而生的組件？給你一秒鐘思考。
想不到也沒關係，那就請簡單回想一下：這個組件，不僅解決了目前業務中各種過濾搜索的疑難雜症場景，比如時間日期、多重篩選等等，還增加智能識別、快速生成的實用功能。
如果能想起這些，説明本文給你留下了還不錯的印象！那應該説明前世你對searchbox回眸了應該不止500次。
官網：https://opentiny.github.io/tiny-search-box
源碼：https://github.com/opentiny/tiny-search-box（歡迎 Star ⭐）
關於 OpenTiny
歡迎加入 OpenTiny 開源社區。添加微信小助手：opentiny-official 一起參與交流前端技術～
OpenTiny 官網：https://opentiny.design\
OpenTiny 代碼倉庫：https://github.com/opentiny\
TinyVue 源碼：https://github.com/opentiny/tiny-vue\
TinyEngine 源碼： https://github.com/opentiny/tiny-engine\
歡迎進入代碼倉庫 Star🌟TinyEngine、TinyVue、TinyNG、TinyCLI、TinyEditor\~
如果你也想要共建，可以進入代碼倉庫，找到 good first issue 標籤，一起參與開源貢獻\~
