精準搜尋
核心思想:將使用者輸入的字串作為一個整體去與陣列的每一項做匹配,把符合的儲存下來即可。
這裡主要用到的JavaScript
字串的indexOf()
方法——返回某個指定的字串值在字串中首次出現的位置,如果不存在,則返回-1。
有一點需要注意,`indexOf()` 方法對大小寫敏感! 另外陣列也有一個`indexOf()`方法
下面是上述例項的完整程式碼,當然實際開發的時候資料肯定沒這麼簡單。我們這裡使用的是Vue + Element
實現
<template> <div class="wrapper"> <el-input clearable placeholder="請輸入" suffix-icon="el-icon-search" v-model="searchMsg" size="mini" @input="handleSearch(searchMsg)" ></el-input> <el-checkbox-group v-model="checkList"> <div v-for="(item, index) in filterMsg" :key="index"> <el-checkbox :label="item">{{ item.name }}</el-checkbox> </div> </el-checkbox-group> </div> </template> <script> export default { data() { return { searchMsg: "", checkList: [], filterMsg: [] }; }, mounted() { this.allMsg = [ { name: "myhua", id: 1 }, { name: "mp3", id: 2 }, { name: "hello", id: 3 }, { name: "world", id: 4 }, { name: "warm weather", id: 5 }, { name: "m3", id: 6 }, { name: "hahaha", id: 7 } ]; this.filterMsg = this.allMsg; }, methods: { // 搜尋方法 handleSearch(queryString) { this.filterMsg = []; this.allMsg.map(item => { if (item.name.indexOf(queryString) !== -1) { this.filterMsg.push(item); } }); } } }; </script>
另外字串的search()
方法在這裡也能實現相同的效果,對大小寫敏感
在這裡推薦使用includes,這樣更語義化一些,自己有點懶這裡就沒改