jQuery 实现商品列表实时搜索过滤

更新日期: 2020-04-07 阅读次数: 2711 字数: 270 分类: Javascript

目标效果

  • 输入时,实时过滤
  • 为空时,显示所有结果
  • url 随关键词变化

过滤逻辑

  • loop item title
  • 先全部隐藏,如果 title 中有关键词,则显示
  • 多个关键词,包含其中一个就显示
  • 如果产品关键词中包含搜索词,也显示,例如搜索硫酸铜

影响因素

  • 当前选中的分类
  • 是否显示更多
  • 未来加入的 tag

但是为了降低代码的维护难度,以及对搜索关键词的明确度的信任,我决定不考虑这三条因素。。。

tag 可以在未来考虑一下。

实时过滤效果并不好

jquery 监听 input 事件,如何排除中文拼音输入法敲字母的过程

da
da'y
da'yi
da'yin
da'yin'j
da'yin'ji
打印机

网上查到的方案,并没有一个合适的。

所以我决定还是,手动点击搜索按钮来触发搜索吧。

tags: js 实时搜索

关于作者 🌱

我是来自山东烟台的一名开发者,有敢兴趣的话题,或者软件开发需求,欢迎加微信 zhongwei 聊聊, 查看更多联系方式