实现js搜索匹配

最新推荐文章于 2024-04-01 04:40:20 发布
最新推荐文章于 2024-04-01 04:40:20 发布
阅读量2.7k 收藏 4
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40452803/article/details/89455773
版权

搜索匹配

搜索匹配 是在常见的搜索引擎中常用的一种技术，它能大大降低搜索耗费时间的成本

HTML5+jquery实现的搜索匹配效果，或者说是搜索过滤，当你在文本框输入一个字符时，如果下边的列表中有以此为开头的内容时，将自动为你显示相关内容

初始状态

在这里插入图片描述
输入上海之后的状态
在这里插入图片描述

关键代码：
在这里插入图片描述

实验总结

在输入框上注册keyup事件，然后在事件中获取我实现定义的data对象数组(一般实时数据通过ajax获取json对象）。取得数据后，在下方区域就可以显示数据了，当我们点击每一项的时候，就可以响应事件。同时根据索引值来调整背景高亮。

Glojish
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
js——括号匹配
肖的博客
08-29 1821
括号匹配 '{([])}', '{}()[]', '([{]])', '[}' 括号匹配检查，匹配返回 true，反之 false let [str, str1, str2, str3] = ['{([])}', '{}()[]', '([{]])', '[}'] function check(str) { let stack = [], flag = true str.s...
js实现搜索框关键字智能匹配代码
11-26
只要使用搜索引擎的朋友应该都有这样的体会，就是当在搜索框输入关键字的时候，会出现自能匹配现象，这绝对是非常好的用户体验，下面就是一段类似的代码，当然这里只是掩饰，所以只能匹配的数据都是本地固定好的，在实际应用中可以才能够数据库读取数据。 效果图： 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>搜索框关键字智能匹配实例代码</title> <style> body, ul, li {
javascript-正则表达式匹配出URL地址，批量添加a标签
哈喽234的博客
07-11 583
同时不匹配：带有a标签的url、邮箱、123.23、haha.123、123.123.123等不是真正url的字符串，富文本消息中的标签正常返回，不影响换行等样式。这个只能完全匹配单个url的情况，多个url不匹配、邮箱、数字、ip等不匹配，本想着就这样限制死算了，结果最近又发现富文本消息默认有p标签等，我是将p标签替换掉之后使用正则匹配的，这样本来换行的消息就不换行了，于是又要改正则了。正常的逻辑是a标签的url不替换，其他正常的url替换，目前这方式还不知道有没有其他问题。
javascript 正则匹配
Littlegirlha的博客
12-08 5527
正则匹配
JS实现正则匹配文本中的URL地址
最新发布
猿小白的博客
04-01 269
如何利用JS正则表达式，提取文本中的URL地址呢？
js字符串与正则匹配
aslifeih的专栏
11-23 1万+
js字符串与正则匹配 　　这里就说一下具体的使用方法，不做过多的解释。　 　　字符串匹配正则的方法：str.方法(reg) 　　　　1、str.search() 　　　　　　参数是正则，将会从开始查找字符串中与正则匹配的字符，并返回该字符的第一次出现的位置，没有则返回-1，应为每次搜索都是从开始搜索，所以只返回第一次出现的位置. var str="javascript"; str.search(/script/);//返回4 　　　　2、str.replace(); 　　　
JS 中几种常见的字符串匹配算法
weixin_39273589的博客
08-28 1658
Rabin-Karp 算法使用了哈希函数来计算模式串和文本串的哈希值，然后在文本串上滑动模式串进行匹配。如果哈希值匹配，则进一步检查模式串和文本串是否完全匹配。这样可以减少字符串比较的次数，提高算法的效率。Rabin-Karp 算法的时间复杂度可以达到 O(n+m)，其中 n 是文本长度，m 是模式长度。
[Javascript] 正则表达式匹配的常用方法总结
一起来看烟花吧的博客
07-16 8605
正则 正则表达式可以被用于 RegExp 的 exec 和 test 方法以及 String 的 match、replace、search 和 split 方法。 正则表达式对象属性 lastIndex 下一次匹配开始的位置 ignoreCase 是否使用了 “i” 标记使正则匹配忽略大小写 global 是否使用了 “g” 标记来进行全局的匹配. multiline 是否使用了 “m” 标记使正则工作在多行模式（也就是，^ 和 $ 可以匹配字符串中每一行的开始和结束（行
JS 正则表达式（正则匹配RegExp）
XSL_HR的博客
04-17 3858
一篇文章带你学会JS正则匹配
JS 正则匹配（RegExp）
热门推荐
墨痕诉清风的博客
09-15 4万+
例如，/a{1,3}/ 不匹配 "cndy"，匹配 "candy," 中的 "a"，"caandy," 中的两个 "a"，匹配 "caaaaaaandy" 中的前面三个 "a"。例如，/a{2}/ 不匹配 "candy," 中的 "a"，但是匹配 "caandy," 中的两个 "a"，且匹配 "caaandy." 中的前两个 "a"。例如，/a{2,}/ 不匹配 "candy" 中的 "a"，但是匹配 "caandy" 和 "caaaaaaandy." 中所有的 "a"。返回值是被找到的值。
js实现带搜索功能的下拉框实时搜索实时匹配
10-26
当select输入框中每输入一点内容的时候，在option中找出与内容匹配的选项显示在option的前面选项中，下面有个不错的示例，希望朋友们可以喜欢
js实现模糊匹配功能
12-02
在搜索框中输入某一个字段，可以查询到相关的内容 功能实现： 1. 先声明变量用于保存输入框以及表格里面的内容 2. 循环遍历 遍历表格每一行，查找匹配项 3. 判断 如果输入框里面的内容跟表格中某个td的内容相似...
原生JS案例——搜索框的搜索数据展示
周百万的博客
10-11 3191
一、主要功能介绍：1、生成UI结构，定义一个数组2、获取表单元素3、创建搜索框的键盘弹起事件4、当在搜索框中输入内容时，遍历数组中的每一个元素，将其中的每一个元素与输入框中输 入的元素相匹配，如果能匹配上就将该内容渲染到提示列表中5、如果输入内容，显示提示列表 ，如果没输入内容，隐藏提示列表6、通过trim() 去掉左右两边的空格，因为空格能匹配所有字符。
js 匹配对象
p_pppxxxxmmm的博客
12-13 1412
场景：有数组arr，需要根据obj对象里面的managerId来排序arr数组的顺序，如果obj里面的managerId在arr数组里面是在第4位，就把arr里面的第四个数据排序到第一个来，代码如下： <script> var arr = [{ managerId: "xiaohong", managerName: "小红" }, { ...
js原生——搜索框，模糊匹配（查询）
h_jQuery的博客
07-09 3778
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do
最全面的65条最常用正则表达式
Keep_Driving_XinYang的博客
02-14 938
很多不太懂正则的朋友，在遇到需要用正则校验数据时，往往是在网上去找很久，结果找来的还是不很符合要求。所以我最近把开发中常用的一些正则表达式整理了一下，在这里分享一下。给自己留个底，也给朋友们做个参考。 一、校验数字的表达式 1 数字：^[0-9]*$ 2 n位的数字：^\d{n}$ 3 至少n位的数字：^\d{n,}$ 4 m-n位的数字：^\d{m,n}$
常见的排序和查找算法（js实现）
lovecoding1的博客
05-11 1026
哈哈哈 前端菜鸡的第一篇博客 以后会坚持写下去的 加油
HTML5 JQuery 实现搜索匹配功能
肖朋伟
04-06 7212
HTML5 JQuery 实现搜索匹配功能 效果动态图： 源代码： all.html <!doctype html> <html> <head> <meta charset="utf-8"> <title>HTML5 JS实现搜索匹配功能-jq22.com</title> <script src="https://li...
js正则实现前端搜索，匹配字符加红
cangowu的博客
06-27 1万+
一、介于公司需要，要开发一个比较简易的笔记本功能，里面要实现按照标题搜索，显示匹配项目，并在匹配项的字符加红显示，中间有空格的可以匹配任何字符。 二、具体的直接看源码吧，这里只是实现一下功能，就没有怎么注意代码的封装 搜索数据，显示符合条件的内容，并显示出红色 var data = [ {
js如何实现搜索框关键字匹配
04-18
可以使用正则表达式来实现搜索框关键字匹配，具体实现可以参考以下代码： ```javascript var searchInput = document.querySelector('#search-input'); var articles = document.querySelectorAll('.article'); ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值