html实现全局搜索

于 2023-07-07 17:06:01 发布
阅读量345 收藏 1
点赞数
文章标签： html vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m1032/article/details/131600691
版权 
<!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
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
怎样用js实现html全站搜索,JS模拟浏览器实现全局搜索功能
weixin_34471838的博客
06-04 2325
JS模拟浏览器实现全局搜索功能发布时间：2020-10-22 09:18:55来源：脚本之家阅读：107作者：loveEternity需要像浏览器的全局搜索一样，搜索指定模块的对应值，然后将匹配到的内容添加背景颜色等。思路需要取到当前指定区域的所有内容然后在取到的内容中找到搜索的内容加上对应的背景颜色最后在将修改后的内容渲染到页面上实现利用innerHTML取到对应模块的内容编写对应的正则表达式来...
怎样用js实现html全站搜索,JavaScript_Dom对象全实例讲解
weixin_34551614的博客
06-04 710
一．简单介绍Dom是W3C-万维网联盟的标准，它定义了访问HTML和XML文档的标准。W3C文档对象模型(DOM)是中立与平台和语言的接口，它允许程序和脚本动态的访问和更新文档的内容、结构和样式的。W3C将DOM分为3个不同的部分:1.核心DOM:针对任何结构化文档的标准模型；2.XML DOM部分：针对XML文档的标准模型；3.HTML DOM部分:针对HTML文档的标准模型；XML DOM:定...
html中的搜索
我的博客
04-01 8380
hello 这次来发一下HTML中的搜索怎么做，其实还是很简单的 旁白：你每次都说简单，我一次都没做出来 这次是真的简单 form表单 首先来说一下form表单，受英语单词“from”的影响，这个单词很容易打错，要记住是“form”哦 表单标记以<form>标记开头，以</form>标记结尾。在表单标记中可以定义处理表单数据程序的URL地址等信息。 form的语法 <form action="url" method="get | post" name="for
HTML站内搜索引擎
jingtian678的博客
07-25 6860
对于一个网站来说，使用搜索引擎来进行站内搜索往往比自己编写的站内搜索更高效，并且不占用网站服务器的资源，下面是我搜集到的几个主要搜索引擎（Google和百度、雅虎）的站内搜索代码，使用时只需要将代码里的"www.williamlong.info"替换成你的网址即可。 http://www.google.com/search"> www.williamlong.inf
html中搜索,HTML中的全文搜索，忽略标签/＆
weixin_39521068的博客
06-04 230
Cats萌萌突出显示搜索关键字并使用javascript从网页中删除突出显示     function highlightAll(keyWords) {         document.getElementById('hid_search_text').value = keyWords;   &nbs...
JS模拟浏览器实现全局搜索功能
11-30
需要像浏览器的全局搜索一样，搜索指定模块的对应值，然后将匹配到的内容添加背景颜色等。 思路 需要取到当前指定区域的所有内容 然后在取到的内容中找到搜索的内容加上对应的背景颜色 最后在将修改后的内容渲染到页面上 实现 利用innerHTML取到对应模块的内容 编写对应的正则表达式来匹配搜索的内容 利用String.prototype.replace替换匹配到的内容 最后在渲染到页面上 代码实现： let wrap = document.querySelector('.wrap'); let innerHTML = wrap[removed]; let reg
metamia:MetaMia是一个PHP应用程序，使用ElasticSearch实现联合搜索
04-27
定义索引和类型在“全局站点变量”部分中，需要注意两个变量：$ allowed_indexes和$ allowed_types。 这就是告诉系统从何处查询的内容。 为了添加索引，我们必须首先在$ allowed_indexes中添加要查询的顶级索引名称...
基于HTML+JQUERY+CSS实现书院静态网页项目【100011350】
04-01
网页设计思路 首页，放置三个分主题进入入口，三个分主题...除以上主要三部份外，我们还设置了一个外链文章访问页面，在此页面我们在全局框架上加入了学校的重要页面链接，可方便直接了解三江，同时还可进行百度搜索。
HTML开发王
01-03
4.3.7 定义搜索引擎搜索方式 4.4 用于http消息报头的元数据(属性http-equiv) 4.4.1 设置网页内容类型和字符集 4.4.2 设置网页所使用的语言 4.4.3 设置网页定时跳转 4.4.4 设置网页禁用缓存 4.4.5 设置网页到期 4.4.6...
从入门到精通HTML5——PDF——网盘链接
02-27
　2.3.5 限制搜索方式 22 　2.3.6 设置网页文字及语言 22 　2.3.7 设置网页的定时跳转 23 　2.3.8 设定有效期限 24 　2.3.9 禁止从缓存中调用 24 　2.3.10 删除过期的cookie 25 　2.3.11 强制打开新窗口 25 　2.3.12...
百度搜索框html代码
09-06
百度搜索框html代码，一个很好的搜索框实例
4大搜索引擎的登陆HTML代码
12-07
4大搜索引擎的登陆代码 4大搜索引擎的登陆代码 4大搜索引擎的登陆代码
搜索框.html
10-13
原生搜索框 模仿百度搜索框。
html网站代码大全
07-25
好用的html 代码大全！好用的html 代码大全！好用的html 代码大全！
html自定义搜索框
08-17
html自定义搜索框，与select2不同，请参看本人博客介绍
html页面查找搜索功能代码
vip1517的博客
09-18 8472
html页面查找搜索功能代码 html查找功能 <input type=“button” οnclick="javascript:search()"value=“搜索” /> 这里插入网页内容
MATLAB的搜索路径
资资的博客
09-08 978
搜索时首先在当前文件夹下搜索，然后再在搜索路径下搜索 1 设置文件搜索路径 path(path,'e:\work') 2
html页面搜索文字
最新发布
EstherNi的博客
06-22 875
【代码】html页面搜索文字。
HTML实例之搜索栏（附源码）
热门推荐
lin123_00的博客
05-19 5万+
1. 简书类 实现效果 打造全网web前端全栈资料库（总目录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新） 更多相关视频： 0基础前端利用『HTML+CSS』制作你喜欢的暗黑破坏神网页开发：BV1C54y1X7ro 前端发展简史，功能以及未来趋势！（你值得观看）：BV1w5411s7e4 给想学编程又无从下手的小白一些建议：BV1Zf4y117ji 「HTML+CSS」实现妙笔千山播放器制作（思路讲解＋代码+成品效果）！：BV18p4y1Q7Y1 前端面试，跳槽必刷200+真面试
vue实现后台回车搜索全局
05-24
可以通过在 input 标签上绑定 `@keyup.enter` 事件来实现回车搜索全局。具体实现如下： ```html <template> <div> <input type="text" v-model="keyword" @keyup.enter="search" placeholder="输入关键字搜索"> <ul> <li v-for="result in results" :key="result.id">{{ result.title }}</li> </ul> </div> </template> <script> export default { data() { return { keyword: '', results: [] } }, methods: { search() { // 全局搜索逻辑 // 将搜索结果赋值给 this.results } } } </script> ``` 在上面的代码中，我们监听了 input 的 `@keyup.enter` 事件，并在对应的方法中执行了全局搜索的逻辑。你可以根据具体业务场景来编写搜索逻辑，最终将搜索结果赋值给 `this.results` 即可展示到页面上。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值