批量模糊查找 (输入关键字模糊查找)

制作一个类似百度搜索框功能,批量模糊查找

输入框模糊查找可以说是很常见的功能之一,一般有输入框查询功能的网站都会运用到

思路分析:

其实模糊查找原理非常简单,输入框输入内容时监听输入框输入的内容,将输入的内容与要比对的数据源进行对比,如果数据源中的数据包含输入框中的内容的字段时,就在输入框下面生成一串可点击的提示语句,点击里面的内容即可跳转至相应的页面,每次改变输入框中的内容,下面的提示语句也会相应变化,输入框失去焦点时隐藏提示语句。

参考代码:

内容部分:

制作一个类似百度搜索框功能,批量模糊查找

样式部分:

制作一个类似百度搜索框功能,批量模糊查找

JS部分:

制作一个类似百度搜索框功能,批量模糊查找

思考:输入框字段为空时,为什么删除子节点时循环用的减循环而没有用加循环?带着这个问题去改变其中的方法你会发现其中原因。

实际效果:

制作一个类似百度搜索框功能,批量模糊查找

对前端感兴趣的小伙伴记得关注小编,每天都会更新前端的一些小技巧。没点赞的小伙伴记得点赞收藏哦,谢谢大家!