在第一轮结果后重新初始化搜索 [英] Reinitialize search after first round of results

问题描述

在我的代码中，我有一个带有清除"按钮和搜索"按钮的 input 字段.

清除"按钮会删除计数器、清空输入字段、删除突出显示并隐藏显示的折叠项目，但不会重新初始化搜索.

问题是我需要检查输入的值是否和以前一样，否则我应该开始新的搜索.

我怎样才能做到这一点?

$(document).ready(function() {//console.log(occurrences);$(document).on("click", "#findWord", function(e) {让出现次数 = [];e.preventDefault();//清除();让 x = document.querySelector("#searchedWord").value;let error = document.querySelector("#message");如果 (x == "") {error.style.display = "block";error.style.color = "红色";} 别的 {error.style.display = "无";高亮字()；displayOcc();}//让 clickInput = document.querySelector('#searchedWord');让 clickClear = document.querySelector("#clear");//使清除按钮出现在输入字段上单击//clickInput.addEventListener('input', function(){//clickClear.style.display = 'block';//});clickClear.addEventListener("click", clear);函数清除(){//从输入中获取搜索词让 clickInput = document.querySelector("#searchedWord");clickInput.value = "";var spans = $(".reports-list-item__title--compendium > mark");//console.log(spans);spans.each(function() {spans.contents().unwrap();});出现次数.拼接(0，出现次数.长度)；//重置我们的标签$("#count").html("");$("#current").html("");$(".timeline-compendium__content").collapse("隐藏");$(".timeline-type .timeline-type__content").collapse("隐藏");}函数高亮字(){//根据我们的术语创建一个正则表达式const word = document.getElementById("searchedWord").value;const r = new RegExp("(" + word + ")", "ig");$(".reports-list-item__title--compendium").each(function(i) {如果 ($(this).text().match(r)) {//console.log($(this).text().match(r));//获取所有匹配项var 匹配 = $(this).text().match(r);//console.log(matches);//遍历它们$.each(匹配，函数(){//将本节的索引压入数组出现次数.push(i);//console.log(occurrences);});//用我们的 `found` 跨度包装每个找到的搜索词以突出显示它$(this).html($(this).text().replace(r, "<mark>$&</mark>"));$(this).closest(".timeline-compendium__content").collapse("show");//滚动到突出显示的单词//$(this).closest(".timeline-compendium__content")[0].scrollIntoView();$(this).closest('.timeline-type .timeline-type__content').collapse('show');}});}函数 displayOcc() {让 lengthOccurrences = 出现次数.长度;console.log('出现的长度(次数)是:' + ' ' + lengthOccurrences);让 currViewMatch = Number(document.querySelector("#current").textContent);console.log('当前查看的匹配次数为:' + ' ' + currViewMatch);//如果我们当前正在查看匹配项，则递增以便我们移动到下一个匹配项currViewMatch = currViewMatch >0 ?currViewMatch + 1 : 0;//如果增加的数字大于匹配的数量，则将其重置为 0currViewMatch = currViewMatch >长度发生 ?1 : currViewMatch;//如果这是第一次点击并且我们找到了匹配项，则将当前设置为第一个匹配项currViewMatch = currViewMatch == 0 &&lengthOccurrences >0 ?1 : currViewMatch;让 insertNbrOcc = lengthOccurrences >0 ?" of " + lengthOccurrences : "匹配发现";////设置找到的匹配数let count = document.querySelector("#count");count.textContent = insertNbrOcc;////设置当前查看的匹配数量让 nbrViewMatch = document.querySelector("#current");nbrViewMatch.textContent = currViewMatch;}});$("#btnNext").click(test);变量 i = 0;功能测试() {var pickHighlights = document.querySelectorAll("mark");var viewportOffset = pickHighlights[i].getBoundingClientRect();//这些是相对于视口的var top = viewportOffset.top;window.scrollTo(0, top);我++;if (i >= pickHighlights.length) {我 = 0;}}});

.found {背景颜色:黄色；}#标签 {左边距:15px；字体大小:16px；}.timeline-纲要{左边距:2rem；}.timeline-type__header {宽度:400px；高度:50px；背景颜色:rgb(46, 177, 100);显示:弹性；对齐项目:居中；对齐内容:居中；白颜色;边框:1px纯白色；}.timeline-type__header:hover {白颜色;背景颜色:rgb(35, 119, 70);}#标签内容{边框:1px纯红色；}输入[类型=文本] {宽度:80%；填充:12px 20px；边距:8px 0；box-sizing: 边框框；}输入#findWord {背景颜色:rgb(248, 211, 3);边界:无；颜色:黑色;填充:15px 32px；文本对齐:居中；文字装饰:无；显示:内联块；字体大小:16px；}#清除 {宽度:25px；高度:25px；位置:绝对；顶部:20px；右:150px；行高:25px；字体大小:14px；左边距:8px；字体粗细:粗体；光标:指针；颜色:#fff;背景颜色:红色；边界:无；边界半径:50%；}#信息 {显示:无；字体大小:1em；}#btn下一个{左边距:0.5rem；}标记 {背景颜色:黄色！重要；}.stickyBar {位置:粘性；顶部:0；z-索引:1；背景颜色:白色；}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="样式表"/><script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script><script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script><div class="容器"><div class="rowstickyBar"><div class="col-sm-12 mb-2"><div id="searchForm" class="d-flex flex-column"><label for="searchedWord">搜索... </label><div class="col-sm-12 p-0 d-flex"><input type="text" id="searchedWord" placeholder="Search..." aria-labelledby="searchedWord" value="cool" class="form-control form-control-lg"/><button type="submit" id="findWord" class="btn btn-primary">搜索</button><input type="button" id="btnNext" value="next"/><div id="clear" role="button">X</div>

<div class="col-sm-6 mb-2"><div id="标签"><span id="current"></span><span id="计数"></span><small role="alert" id="message" aria-hidden="true">请输入一个词开始搜索</small>

<div class="row"><div class="col"><section class="timeline-compendium"><a class="btn timeline-compendium__header" data-toggle="collapse" href="#introduction" role="button" aria-expanded="true" aria-controls="introduction"><div class="row align-items-center"><div class="col-auto">1<sup>st</sup>可折叠项目