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

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

目标效果

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

过滤逻辑

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

影响因素

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

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

tag 可以在未来考虑一下。

实时过滤效果并不好

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

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

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

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

领取618阿里云/腾讯云服务器优惠券

关于作者

我是来自山东烟台的一名开发者,喜欢瞎折腾,顺便记记笔记。有敢兴趣的话题,欢迎加微信 zhongwei 聊聊。 白天写程序,晚上哄熊孩子,可能回复有点慢,见谅。 查看更多联系方式

tags: js 实时搜索

相关文章

爱评论不评论

近期节日

2020年06月05日 世界环境日
2020年06月05日 芒种
2020年06月06日 全国爱眼日
2020年06月11日 中国人口日
2020年06月20日 世界难民日
2020年06月21日 父亲节
2020年06月21日 夏至
2020年06月22日 中国儿童慈善活动日
2020年06月23日 国际奥林匹克日
2020年06月25日 全国土地日
2020年06月25日 端午节
2020年06月26日 国际禁毒日
查看更多节日