html实现全局搜索

原创 已于 2025-03-12 15:48:53 修改 · 763 阅读 · 2 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
GEO检测
标签
#html #vue.js #javascript
于 2023-07-07 17:06:01 首次发布
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/ui.css"/>
    <style>

        #cableSelectionTable {
        }

        .el-table__header {
            width: 100% !important;
        }

        .el-table__body {
            width: 100% !important;
        }
    </style>
</head>
<body>
<div id="cableSelectionTable">
    <div class="con">
        <div style="display: flex;margin-bottom: 10px">
            <el-input
                    v-model="searchText"
                    placeholder="请输入关键字"
                    clearable
                    style="width: 200px;"
                    size="small"
                    @keyup.enter.native="search"
            >
            </el-input>
            <el-button
                    type="primary"
                    size="small"
                    style="margin-left:5px"
                    icon="el-icon-search"
                    @click="search"
            ></el-button>
            <div class="searchRight">
                    <span class="item" style="margin:0px 5px">
                      {{ num === 0 ? '没有任何结果' : indexNum + 1 + '/' + num }}</span>
                <el-button
                        icon="el-icon-arrow-up"
                        circle
                        style="font-size: 16px"
                        type="text"
                        size="mini"
                        @click="prev"
                ></el-button>
                <el-button
                        icon="el-icon-arrow-down"
                        circle
                        style="font-size: 16px"
                        type="text"
                        size="mini"
                        @click="next"
                ></el-button>
            </div>
        </div>
        <el-table id="outTable" key="one" ref="tb" height="calc(100vh - 150px)" :data="data" border
                  :header-cell-style="{color:'#333333',backgroundColor:'#77B6E4'}"
                  :cell-style="{borderColor:'#e1e1e1'}">
            <el-table-column label="线缆序号" prop="indexNumber" align="center" width="60"></el-table-column>
            <el-table-column label="Cable Name" prop="cableName" align="center" :show-overflow-tooltip="true"
                             width="300">
            </el-table-column>
            <el-table-column label="连线信息" prop="a" align="center" width="300" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <div v-for="(item,index) in scope.row.list" :key="index">{{item}}</div>
                </template>
            </el-table-column>

            <el-table-column label="A-Connetion" prop="a" align="center">
                <el-table-column label="板卡" prop="a_board" align="center"></el-table-column>
                <el-table-column label="Location" prop="a_position" align="center"></el-table-column>
            </el-table-column>
            <el-table-column label="B-Connetion" prop="b" align="center">
                <el-table-column label="板卡" prop="b_board" align="center"></el-table-column>
                <el-table-column label="Location" prop="b_position" align="center"></el-table-column>
            </el-table-column>
            <el-table-column label="用量" prop="amount" align="center" width="85px">
            </el-table-column>
            <el-table-column label="代替阶" prop="substitute" :show-overflow-tooltip="true" align="center" width="150">
            </el-table-column>
            <el-table-column label="InspurPN" prop="inspurPn" :show-overflow-tooltip="true" align="center" width="150">
            </el-table-column>
            <el-table-column label="厂商料号" prop="supplierPn" :show-overflow-tooltip="true" align="center" width="150">
            </el-table-column>
            <el-table-column label="版次" prop="supplierVersion" :show-overflow-tooltip="true" align="center" width="150">
            </el-table-column>
            <el-table-column label="是否标准线缆" prop="isStandardCable" :show-overflow-tooltip="true" align="center"
                             width="180">
            </el-table-column>
            <el-table-column label="是否复用" prop="reuseInfo" :show-overflow-tooltip="true" align="center" width="150">
            </el-table-column>
            <el-table-column label="无替代料原因" prop="substituteInfo" :show-overflow-tooltip="true" align="center"
                             width="180">
            </el-table-column>
            <el-table-column label="特殊实项备注" prop="spicalItemInfo" :show-overflow-tooltip="true" align="center"
                             width="150">
                <template slot-scope="scope">
                    <span>{{scope.row.reuseNumber}}</span>
                </template>
            </el-table-column>
        </el-table>
    </div>
</div>
</body>
<script src="js/browser.js"></script>
<script src="js/polyfill.js"></script>
<script src="js/vue.js"></script>
<script src="js/el.js"></script>
<script src="js/axios.js"></script>
<!-- use version 0.18.8 -->
<script type="text/babel">
    new Vue({
        el: "#cableSelectionTable",
        data() {
            return {
                searchText: '',
                scroll: '',
                index: 1,
                preQuery: '',
                indexNum: 0,
                num: 0,
                main: null,
                /**上方为检索字段*/
                data: [], //table 数组

            }
        },
        mounted() {
            window.addEventListener('scroll', this.dataScroll)
            this.main = document.querySelector('.el-table__body-wrapper')
            /**上方为检索*/
        }
        ,
        methods: {
            /**下方为检索方法*/
            search() {
                console.log('s')
                this.num = 0
                this.indexNum = 0
                let main = this.main || document.querySelector('.el-table__body-wrapper')
                let innerHTML = main.innerHTML
                console.log(innerHTML, 'innerHTML')
                // 如果要兼容IE就使用下面的正则 （谷歌 IE 都可以使用）
                innerHTML = innerHTML.replace(new RegExp('<[^>]+>', 'g'), function (str) {
                    return str.replace(new RegExp('(<\/?em.*?>)|(<\/?strong.*?>)', 'g'), '')
                })
                //------ 这行代码不兼容IE
                // const emReg1 = new RegExp('<em style="background-color: yellow">', 'g')
                // innerHTML = innerHTML.replace(emReg1, '')
                // const emReg2 = new RegExp('</em>', 'g')
                // innerHTML = innerHTML.replace(emReg2, '')
                // const emReg3 = new RegExp('<strong style="background-color: #ff9632">', 'g')
                // innerHTML = innerHTML.replace(emReg3, '')
                // const emReg4 = new RegExp('</strong>', 'g')
                // innerHTML = innerHTML.replace(emReg4, '')
                // ------
                main.innerHTML = innerHTML
                // 设置本次搜索背景色
                if (this.searchText !== '' && this.searchText !== ' ') {
                    const reg = new RegExp(this.searchText, 'g')
                    const searchText = this.searchText
                    let mainInnerHTML = innerHTML.replace(new RegExp('(?=\>).+?(?=\<)', 'g'), function (str) {
                        const reg1 = new RegExp('(?=>).+', 'g')
                        return str.replace(new RegExp('(>).+', 'g'), function (str2) {
                            return str2.replace(reg1, function (str1) {
                                return str1.replace(reg, '<em style="background-color: yellow">' + searchText + '</em>')
                            })
                        })
                    })
                    main.innerHTML = mainInnerHTML
                }
                // 替换配置
                this.getSearchList()
            },
            getSearchList() {
                // em标签都是被替换的 所以em标签的数量就是搜索到关键字的数量
                const num = document.getElementsByTagName('em').length
                console.log(num, 'ssss')
                this.num = num
                if (num !== 0) {
                    document.getElementsByTagName('em')[0].innerHTML =
                        '<strong style="background-color: #ff9632">' +
                        this.searchText +
                        '</strong>'
                    // 滚动到第一个关键字位置
                    document.getElementsByTagName('em')[0].scrollIntoView({
                        block: 'start',
                        behavior: 'smooth'
                    })
                }
            },
            dataScroll() {
                this.scroll =
                    document.documentElement.scrollTop || document.body.scrollTop
            },
            // 下一个
            next() {
                if (this.num !== 0) {
                    for (let i = 0; i < document.getElementsByTagName('em').length; i++) {
                        document.getElementsByTagName('em')[i].innerHTML = this.searchText
                    }
                    if (this.indexNum === this.num - 1) {
                        this.indexNum = 0
                    } else {
                        this.indexNum = this.indexNum + 1
                    }
                    document.getElementsByTagName('em')[this.indexNum].innerHTML =
                        '<strong style="background-color: #ff9632">' +
                        this.searchText +
                        '</strong>'
                    document.getElementsByTagName('em')[this.indexNum].scrollIntoView()
                }
            },
            // 上一个
            prev() {
                if (this.num !== 0) {
                    for (let i = 0; i < document.getElementsByTagName('em').length; i++) {
                        document.getElementsByTagName('em')[i].innerHTML = this.searchText
                    }
                    if (this.indexNum === 0) {
                        this.indexNum = this.num - 1
                    } else {
                        this.indexNum = this.indexNum - 1
                    }
                    document.getElementsByTagName('em')[this.indexNum].innerHTML =
                        '<strong style="background-color: #ff9632">' +
                        this.searchText +
                        '</strong>'
                    document.getElementsByTagName('em')[this.indexNum].scrollIntoView()
                }
            }

        }

    })
</script>
</html>
m1032
关注
Element UI的数据表格数据检索方法
qq_48730507的博客
04-25 3708
Element UI的数据表格数据检索方法，单元格内容检索，表头样式检索。
vue+element ui 表格添加多个搜索条件筛选（前端查询）
yuwenwenwenwenyu的博客
06-20 6821
filterList 为筛选后的数据，可以重新给tableData赋值，赋值后如果遇到表格数据不刷新的情况，可以给table加上一个随机的key。这样可以解决重新赋值页面不刷新的情况。点击查询按钮调用下面的方法。
vue+element-ui的表格组件实现简单的搜索框功能
kurodasense的博客
02-04 7104
在使用element-ui的表格组件时，遇到了搜索框功能的实现问题。它官网的表格组件展示里有一个自定义表头的实现(其图如下)，但是并没有给出搜索框的实现代码。 搜索了一下网上的资料，发现大多都是前端来实现的。我想搜索功能也应该交由前端来实现，交由后端的话可能会增加后端服务器的负担，能给前端浏览器做的就给。 搜索功能应该是模糊匹配，目前想到的实现方法是：将el-table中的data属性绑定为到一个计算属性上，这个计算属性根据搜索框的内容，来返回匹配上搜索内容的数据。 一种实现方法是： computed:
elementui table头加入搜索条件
weixin_45697659的博客
06-09 2180
背景：elementui 中table组件，表头加入搜索条件。
使用elementUI组件实现表格的分页以及搜索功能
热门推荐
m0_69983788的博客
08-09 1万+
使用elementUI组件实现表格的分页以及搜索功能，主要的UI组件：el-input、el-table、el-pagination
怎样用js实现html全站搜索,JS模拟浏览器实现全局搜索功能
weixin_34471838的博客
06-04 2594
JS模拟浏览器实现全局搜索功能发布时间：2020-10-22 09:18:55来源：脚本之家阅读：107作者：loveEternity需要像浏览器的全局搜索一样，搜索指定模块的对应值，然后将匹配到的内容添加背景颜色等。思路需要取到当前指定区域的所有内容然后在取到的内容中找到搜索的内容加上对应的背景颜色最后在将修改后的内容渲染到页面上实现利用innerHTML取到对应模块的内容编写对应的正则表达式来...
全站搜索代码html5,JS模拟浏览器实现全局搜索功能
weixin_34276402的博客
06-04 939
需要像浏览器的全局搜索一样，搜索指定模块的对应值，然后将匹配到的内容添加背景颜色等。思路需要取到当前指定区域的所有内容然后在取到的内容中找到搜索的内容加上对应的背景颜色最后在将修改后的内容渲染到页面上实现利用innerHTML取到对应模块的内容编写对应的正则表达式来匹配搜索的内容利用String.prototype.replace替换匹配到的内容最后在渲染到页面上代码实现：let wrap = d...
vue3 仿Ctrl+F实现页面全局搜索
weixin_43678876的博客
08-27 904
2.通过搜索内容进行比对，给搜索内容外部重新生成一个标签。3.给元素重新赋值html。1.获取元素的html。
Angular Filter实现页面搜索
weixin_34358092的博客
11-30 972
前言本文代码基于angular v6.x 以上。我们在开发过程中经常会遇到在页面上实现全局搜索的需求，例如：表格搜索，通过关键词检索整个表格，过滤出我们需要的数据。在Angular6 中我们可以通过Filter + Pipe 的方式来实现这个功能。下面我们看一下实现代码。经人提醒，代码排版太乱。后续考虑将一个完整版的demo放到GitHub上，敬请期待。目前可参考我语雀上的文档，Value-语雀。...
Django、haystack、whoosh实现全局搜索
LDC，公众号【轻松学编程】
08-25 3339
Django、haystack、whoosh实现全局搜索 【参考：https://blog.csdn.net/zhaogeno1/article/details/78965298 https://www.cnblogs.com/fuhuixiang/p/4488029.html 】 创建Django项目，创建子应用。 一、设置全局搜索 1.首先安装haystack、whoosh、jie...
Spring boot开源项目之个人博客（15）—博客详情页面展示
qq369392973的博客
08-28 830
Spring boot开源项目之个人博客（15）—博客详情页面展示 博客详情页分为两个部分，一个是博客详情信息的渲染，一个是评论功能。在这之前，做了一个全局搜索的功能。 1. 全局搜索 在导航栏有一个搜索框，定义搜索的功能是输入字段查找标题和内容中包含字段的博客，然后把符合条件的博客分页展示。 简单处理一下页面，粘贴之前博客列表中的div，就省去了再写theamleaf去渲染了，主要内容是根据搜索字段查找符合条件的博客。从前端开始看 <form action="#" name="search" th:
微信小程序类似v-html标签解析，关键字高亮
abc516835137的博客
08-26 1324
搜索文字替换，让关键字高亮，replace为替换,"g"为全局搜索,类似于v-html标签
内网日志排查小工具：纯 HTML 单文件，超大日志秒开 + 全局搜索
最新发布
botaoyong的博客
04-21 21
html编写的超大日志查看器
开发小而美的个人博客之功能实现
erwaplus的博客
07-02 939
文章目录一、后端管理1、登录2、分类、标签管理二、前端展示1、前端全局搜索2、博客详情3、评论功能4、按分类展示5、按标签分类6、归档页7、关于我页 一、后端管理 1、登录 首先实现登录功能，设计出登录页面和后台管理首页，service层的UserService和UserRepository主要用来检验用户名和密码 主要代码部分 package com.lxt.service; import com.lxt.dao.UserRepository; import com.lxt.po.User; impo
Js的gim正则验证
古古天的博客
11-25 3289
g-global 全局搜索，即不是搜到一个匹配就返回，而是搜出全部匹配 一般返回是一个数组 i- 忽略大小写搜索   m-多行搜索，以前限于计算机能力，搜索只在每行行首到行尾间进行。比如一个匹配结果在两行的换行处，就会不匹配了，添加这个 就同时搜索换行的地方 如： dasdssda test /gim,''))">去除HTML标签 在全部gim采用时，可以达到效果，也可以分开
富文本插件是如何实现的
taobysj的博客
07-29 222
本文介绍了使用第三方富文本插件实现表单编辑功能的方法：首先引入插件所需的JS/CSS库，在表单页面添加富文本标签；插件会自动将样式转换为HTML文本存入数据库；查询时直接显示HTML内容实现所见即所得效果。同时提供了通过IDEA全局搜索"editor"关键字快速定位代码位置的技巧（附搜索截图）。全文简明扼要地说明了富文本集成的实现逻辑和代码定位方法。
spring boot第四次作业
a2534142998的博客
08-03 298
spring boot实现新闻首页与详情页 NewService //主页显示新闻列表 Page listNew(Pageable pageable); //主页推荐最新新闻列表 List<News> listRecommendNewTop(Integer size); //全局搜索 Page<News> listNew(String query,Pageable pageable); News getAndConvert(Long id); NewServiceImpl @O
django for 前端_Django项目(四、前端技巧)
weixin_33501343的博客
12-24 436
模版的继承为了使得Django的前端html代码可以复用, Django允许以模版形式使得html之间可以继承。#base.html{% block XX %}{% endblock %}#index.html{% extend 'base.html' %}{% block XX %}atom{% endblock %}显示media如果我们需要在前端显示models中的image, 我们需要一些...
免费 AI 工具导航网站源码｜纯前端实现 + SEO 优化 + 高颜值 UI
原创静态网页模板免费商用下载，含防丢失页、网址发布页、APP下载落地页等10+类模板，支持HTML源码直接使用+效果演示，助力快速搭建高转化营销页
02-24 1036
本文分享一款纯前端实现的AI工具导航静态网页源码，无需后端开发即可快速部署。源码基于HTML+Tailwind CSS+JavaScript开发，具有五大核心功能：1）完整的工具分类与筛选体系，预设9大AI工具分类；2）全响应式布局，适配各类设备；3）高颜值UI设计，支持暗黑模式切换；4）深度SEO优化，内置社交化标签；5）实用的收藏和统计功能。源码优势在于零部署门槛、加载速度快、高度可定制且符合规范。适用于个人开发者、自媒体博主、团队协作等多种场景，提供完整的部署教程和定制示例，是搭建专属AI工具导航站的
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值