当前位置: 首页 > news >正文

vue2 实现简易版的模糊查询功能

前置知识

节流函数首先是节流,就是节约流量、内存的损耗,旨在提升性能,在高频率频发的事件中才会用到,比如:onresize,onmousemove,onscroll,oninput等事件中会用到节流函数

输入框的模糊查询功能原理分析

  • 所谓模糊查询就是不需要用户完整的输入或者说全部输入信息即可提供查询服务,也就是用户可以在边输入的同时边看到提示的信息(其实是查询出来匹配到的信息)
  • 百度的搜索功能就是很好的模糊查询的例子;
  • 其实模糊查询的原理就是给输入框绑定oninput事件监听用户输入情况,然后每次用户只要在输入框中输入了信息就触发事件进行查询然后实时展示;
  • 虽然原理很简单,但是实现起来会有一些问题,我们可以想想,每输入一个字符都会触发事件,那如果我们需要输入很长的信息呢,那查询是不是就得触发多次?
  • ajax连续多次触发,再加上如果我们的方法体中有操作DOM元素的方法,那么必然会给我们的浏览器进入假死甚至崩溃状态;那么我们

http://www.mrgr.cn/news/34996.html

相关文章:

  • sqli-labs靶场9-12关(每日4关练习) 持续更新!!!
  • 【Python进阶】Python中的数据库交互:ORM技术与SQLAlchemy
  • 开源竞争-利用kimi编程助手搭建小程序(11)
  • 利用 Vue.js 开发动态组件的实战指南
  • HTML之表单学习记录
  • LeetCode【0028】找出字符串中第一个匹配项的下标
  • 1.1 HuggingFists简介(二)
  • 华为云长江鲲鹏深度赋能,大势智慧稳居“实景三维+AI”领域排头兵
  • 解决银河麒麟桌面操作系统V10SP1 SSH连接“connection reset by ip地址 port 22”问题
  • Qt 每日面试题 -3
  • Linux:文件描述符详解
  • RocketMQ简介与应用场景
  • x-cmd pkg | hurl - 强力的 HTTP 请求测试工具,让 API 测试更加简洁和高效
  • PCIe configuration 包分析
  • 【深度学习|地学应用】glacier——让我们一起看看深度学习在冰川研究中的应用是怎么样的呢?
  • np.pad实现零填充
  • Python知识点:如何使用Python与Java进行互操作(Jython)
  • js中正则表达式中【exec】用法深度解读
  • 云服务器(华为云)安装java环境。
  • 使用Adobe XD进行制作SVG字体
  • vulnhub(13):Digitalworld.local JOY(ftp 的未授权文件读写漏洞、文件覆盖提权)
  • LeetCode题练习与总结:二叉树的最近公共祖先--236
  • Miniconda 安装教程
  • 【算法业务】基于Multi-Armed Bandits的个性化push文案自动优选算法实践
  • mfc异步TCP Client通信向主线程发送接收消息
  • Vue3.5 有那些变化?