前端实现全局搜索

ps:vue 中实现

1.js 部分

实现展示搜索结果

  computed:{
          lists(){
            const search = this.search.toLowerCase();
            if (search) {
              // filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
              return this.dormitory.filter(data => {
              
                return Object.keys(data).some(key => {
                
                  return String(data[key]).toLowerCase().indexOf(search) > -1
                })
              })
            }
            return this.dormitory
          }
        },

lists //展示list
dormitory //全数据

  // some() 方法用于检测数组中的元素是否满足指定条件;
  // some() 方法会依次执行数组的每个元素：
  // 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测;
  // 如果没有满足条件的元素，则返回false。

 // 注意： filter() 、 some()  不会对空数组进行检测。
 // 注意： filter() 、 some()  不会改变原始数组。

.toLowerCase()转换为小写