js实现模糊搜索与关键字高亮

最新推荐文章于 2024-06-21 14:20:11 发布
最新推荐文章于 2024-06-21 14:20:11 发布
阅读量3k 收藏
点赞数
分类专栏： js 项目开发中遇到的问题 文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Dasy_R/article/details/127850453
版权

一、由接口实现模糊搜索
后端接口实现模糊搜索，只需要实现关键字高亮即可，以uniapp请求为例

getList() {
   
	uni.showLoading({
   
		title: '加载中'
	});
	let data = {
   }//需要传的参数
	uni.request({
   
		url: url,//需要请求的接口
		method: "GET",
		header: {
   
			'X-JWT-TOKEN': this.token
		},//接口需要传的token 
		data: data,
		success: (res) => {
   //成功返回
			uni.hideLoading();//关闭加载的圈圈
			var list = res.data.Results;//返回的数组
			// 设置关键字高亮需要额外添加新字段
			list.forEach((item) => {
   
				this.$set(item,'Text', item
最低0.47元/天 解锁文章
混度思绪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js模糊搜索高亮效果
weixin_53532986的博客
02-25 710
js模糊搜索高亮效果 先看效果图 然后代码： <!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">
php 多关键字 高亮显示实现代码
10-28
### PHP多关键字高亮显示实现方法 在本文中，我们将探讨如何使用PHP实现对文本中的多个关键字进行高亮显示的功能。这项技术常用于搜索引擎、论坛系统等场景中，以帮助用户快速定位到他们感兴趣的内容部分。 #### ...
用JS将搜索的关键字高亮显示实现代码
10-26
介绍了JS将搜索的关键字高亮显示实现代码，有需要的朋友可以参考一下
用ES搜索关键字并且返回模糊字段高亮
qq_40415205的博客
05-12 3249
一般来说，各个网站，首页的搜索，都会有进行全文搜索的示例，并且把模糊匹配的多个数据进行标记(高亮)，这样便于全局检索关键的数据，便于客户进行浏览。基于此，本文简单介绍这种功能基本java 的 实现。类型ID: 1 线索、2 客户、3 商机、4 联系人、5 售前、6 订单、7 合同，下面是最终的想要的结果，搜索内容代码 1， type 是 类型。由于公司页面此功能隐藏了，本文就以接口调用返回看具体实现了。控制层 controller。// 构建查询条件 & 高亮。逻辑层 service。
前端模糊搜索关键字高亮
最新发布
Brod-Roy的博客
06-21 287
前端模糊搜索关键字高亮。
JS中的模糊查询功能
geng1025的博客
12-09 2615
模糊查询是指可以在不明确指定查询条件的情况下，自动查找与指定字符串相似的内容。例如，我们在搜索引擎中输入关键字时，就会出现相关的搜索结果，这就是利用了模糊查询功能。在JS中，我们可以利用一些方法来实现对字符串的模糊查询。
js根据数据关键字实现模糊查询功能
杜永康的博客
03-28 3923
模糊查询功能是指在搜索或者查询时，允许用户输入部分关键词或者模糊信息，从而快速找到相关的结果。它的意义在于方便用户快速找到相关信息，提高用户体验，同时也能够增强搜索引擎的搜索能力，提高搜索结果的准确性。此外，模糊查询功能还可以应用于数据挖掘、自然语言处理等领域。以上是一些常见的实现方法，具体的实现方式还需要根据具体的需求和场景进行选择和调整。使用正则表达式来匹配输入的关键词实现模糊查询功能。在这里，我们先创建一下假数据用以说明。
jQuery搜索框输入下拉文字高亮显示
06-01
当用户在搜索框中输入文本时，系统会动态地更新下拉菜单中的选项，将与输入内容相匹配的部分高亮显示。这通常通过监听`input`事件来实现，该事件会在用户输入时触发。然后，我们需要遍历下拉菜单中的每个选项，检查...
jQuery实现搜索页面关键字的功能
10-20
在本文中，我们将探讨如何使用jQuery实现搜索页面关键字的功能，这可以帮助用户快速定位到他们感兴趣的信息。 首先，我们需要一个HTML结构来展示文本内容和搜索功能。在给出的示例中，可以看到有三个`<p>`标签分别...
iOS关键字高亮
08-22
在iOS开发中，关键字高亮是一项重要的功能，它主要用于提高用户体验，特别是在搜索场景下，能够帮助用户快速定位和识别他们正在寻找的信息。本篇将详细探讨如何在iOS应用中实现关键字高亮，以及相关的技术点。 首先...
vue实现搜索文字高亮功能
m0_47791238的博客
10-12 3465
在前端开发中，要实现文字搜索高亮效果，你可以使用JavaScript来搜索文本并通过CSS或其他方式对匹配的文本进行高亮处理。以下是一种常见的方法：实现步骤：1、 获取用户输入的搜索词。2、创建一个正则表达式，以全局（g）不区分大小写（i）的方式匹配搜索词。获取文本内容。3、使用正则表达式替换匹配的文本，并在匹配文本周围添加高亮类。4、更新文本内容。
uniapp：搜索关键字，高亮提示
sunluyi的博客
03-01 908
uniapp搜索关键字高亮显示，vue搜索关键字高亮显示
Vue.js通过filter实现搜索关键字高亮
混世大魔王ya的博客
09-19 774
在 Vue.js 中实现搜索关键字高亮是一项常见的任务，通过使用正则表达式和字符串替换，我们可以轻松地实现这个功能。首先，我们需要创建一个过滤器，用于在模板中实现搜索关键字高亮。在你的 Vue.js 组件的任何一个地方，你可以创建一个名为。一旦我们创建了过滤器，我们就可以在 Vue 组件的模板中应用这个过滤器了。在上面的样式中，我们使用黄色作为背景颜色来突出显示高亮部分。在上面的样式中，我们使用黄色作为背景颜色来突出显示高亮部分。在上面的代码中，我们首先在模板中创建了一个输入框，用于输入搜索关键字。
原生js实现搜索联想关键字高亮功能
客官不爱喝酒的博客
06-19 761
原生js实现搜索联想关键字高亮
uniapp、Vue实现模糊匹配、搜索关键字高亮demo效果（整理）
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
04-02 810
Vue实现模糊匹配、搜索关键字高亮
uni-app：搜索关键词并高亮显示，可重复显示
qq_44429079的博客
01-06 1113
全部代码： 详情可见：https://ask.dcloud.net.cn/article/35411，我只改了匹配的类型和样式 <template> <view class="input-group"> <input :placeholder="placeholder" @input="search" v-model="name" class="input" /> <image
js模糊查询
热门推荐
小龚的博客
03-09 2万+
第一篇博客。
JS搜索字符串，搜索到的字符串高亮处理（H5、uniapp）
随身笔记
05-24 580
【代码】JS搜索字符串，搜索到的字符串高亮处理（H5、uniapp）
vue实现多个关键字高亮，返回多个结果的模糊查询
06-01
在Vue中实现多个关键字高亮、返回多个结果的模糊查询，可以使用正则表达式和Vue的computed计算属性来实现。 首先，将要查询的关键字以数组的形式保存下来，例如： ```javascript data() { return { keywords: ['Vue', '多关键字', '模糊查询'], articles: [ { title: 'Vue实现多关键字高亮和模糊查询', content: '...' }, { title: '使用Vue开发多关键字搜索功能', content: '...' }, ... ] } } ``` 接下来，使用computed计算属性来实现模糊查询和关键字高亮： ```javascript computed: { filteredArticles() { let articles = this.articles let keywords = this.keywords if (keywords.length > 0) { let regex = new RegExp(keywords.join('|'), 'gi') articles = articles.filter(article => { return article.title.match(regex) || article.content.match(regex) }) articles = articles.map(article => { article.title = article.title.replace(regex, '<span class="highlight">$&</span>') article.content = article.content.replace(regex, '<span class="highlight">$&</span>') return article }) } return articles } } ``` 上述代码中，先将要查询的关键字拼接成正则表达式，使用`|`作为分隔符，然后调用`match()`方法进行模糊匹配，将匹配到的文章进行关键字高亮处理，最后返回匹配到的文章数组。 最后，在模板中遍历`filteredArticles`数组，将文章渲染到页面上： ```html <template> <div> <div v-for="article in filteredArticles" :key="article.id"> <h2 v-html="article.title"></h2> <p v-html="article.content"></p> </div> </div> </template> ``` 在CSS中定义`.highlight`样式，用于显示高亮效果： ```css .highlight { color: red; font-weight: bold; } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值