• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

小程序中实现本地搜索中将含有搜索关键字标红(用的uniApp) ...

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

WXML:

<view class="header">
  <input
    class="input"
    placeholder-class="uni-input-placeholder"
    placeholder="请输入搜索内容"
    v-model.trim="qString"
    @confirm="handleSearch"
    @input="handleValue"
  />
  <uni-icons class="icon" type="search" color="#B5B5B5" size="23" />
</view>
// 显示红色字体的标题
<rich-text :nodes="item.storeName | filterTitle(qString)" v-if="showRedText">
</rich-text>
<rich-text :nodes="item.storeName" v-else>
</rich-text>

 

JS:

数据:

 const storeList = [
  {
    id: 1,
    title: \'咖啡哈哈哈哈嘿嘿嘿和嘿嘿\',
    address: \'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX\'
  },
  {
    id: 2,
    title: \'上海的某某某咖啡哈哈哈\',
    address: \'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX\'
  }
 ]

data () {
  return {
    storeList, // 数据列表
    qString: \'\', // 搜索框的内容
    searchList: [], // 搜索出来的结果
    showRedText: false // 是否显示红色字体的标题
  }
},
created () {
  // 进页面的时候把数据赋值,用searchList来渲染
  this.searchList = this.storeList
},
filters: {
  // 标题的某些被搜索到的文字显示红色的过滤器
  filterTitle(val, key) {
    return key ? \'<div class="uni-ellipsis uni-title">\' + val.replace(key, \'<span style="color:red;">\' + key + \'</span>\') + \'</div>\' : \'<div class="uni-ellipsis uni-title">\' + val + \'</div>\'
  }
},
methods: {
  handleSearch () {
    let { storeList, qString } = this
    this.showRedText = true // 当点击搜索的时候再让字体变红
    // 搜索的时候当含有搜索的值的数据进行过滤---拿到新的数据
    this.searchList = storeList.filter(arg => arg.title.includes(qString))
  },
  handleValue (e) {
  // 当清空的时候恢复原来的数据
    if (!e.target.value) {
      this.searchList = this.storeList
    }
  }
}


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap