从输入字段中搜索一个术语，如果没有值，则将其重置，这是两个字符以上的单词的问题(包括延迟功能)

Question

我构建了一个输入字段，用于在问答页面上搜索一些关键字。我构建的系统不止于此，因为它还打开和关闭带有答案的div(来自输入和其他不同的HTML标记(，但我关注的是输入字段。

首先是我的代码，然后是我的问题：

const searchfaq = $('#text-search');
const searchtarget = $(".nodisplay");
const htmltochange = searchtarget.map(function() {
return $(this).children().find('p').html();
}).get();
function delay(callback, ms) {
var timer = 0;
return function() {
var context = this,
args = arguments;
clearTimeout(timer);
timer = setTimeout(function() {
callback.apply(context, args);
}, ms || 0);
};
}
searchfaq.keyup(delay(function(e) {
let val = $(this).val().toLowerCase();
searchtarget.hide();
searchtarget.prev().children('.minus').removeClass('rotate');
searchtarget.each(function(index) {
let text = $(this).html().toLowerCase();
let paragraph = $(this).children().find('p');
let otherparagraph = searchtarget.children().find('p');
if (text.indexOf(val) != -1) {
$(this).show();
$(this).prev().children('.minus').addClass('rotate');
var re = new RegExp(val, 'gi');
paragraph[0].innerHTML = htmltochange[index].replace(re, `<mark>$&</mark>`);
}
if (val.length === 0) {
paragraph[0].innerHTML = htmltochange[index];
$(this).hide();
searchtarget.prev().children('.minus').removeClass('rotate');
}
});
}, 500));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="lazyblock-faq-search">
<h1>Frequently Asked Questions</h1>
<form _lpchecked="1">
<input id="text-search" type="text" aria-label="search-for-answers" placeholder="Search for answers">
</form>
</div>
<div class="lazyblock-faq">
<div class="row">
<aside class="col-md-3">
<ul class="sticky-top">
<li class="active">
<a href="#chapter-1">Chapter 1</a>
</li>
<li class="">
<a href="#chapter-2">Chapter 2</a>
</li>
</ul>
</aside>
<div class="question-and-answer col-md-9">
<h2 id="chapter-1">Chapter 1</h2>
<div class="single-faq">
<h3>This is a question</h3>
<div class="icon-faq">
<span class="minus">+</span>
<span class="plus">–</span>
</div>
<div class="nodisplay collapse" style="display: none;">
<div class="lazyblock-content " id="content-extra-Z2cLmzB">
<div class="row">
<div class="col-md-12">
<p>This is the answer</p>
</div>
</div>
</div>
</div>
</div>
<div class="single-faq">
<h3>This is a question 2</h3>
<div class="icon-faq">
<span class="minus">+</span>
<span class="plus">–</span>
</div>
<div class="nodisplay collapse" style="display: none;">
<div class="lazyblock-content " id="content-extra-ZhBtAi">
<div class="row">
<div class="col-md-12">
<p>This is the answer 2</p>
</div>
</div>
</div>
</div>
</div>
<div class="single-faq">
<h3>Question 3 ?</h3>
<div class="icon-faq">
<span class="minus">+</span>
<span class="plus">–</span>
</div>
<div class="nodisplay collapse" style="display: none;">
<div class="lazyblock-content " id="content-extra-ZPm3XU">
<div class="row">
<div class="col-md-12">
<p>This is the answer 3</p>
</div>
</div>
</div>
</div>
</div>
<h2 id="chapter-2">Chapter 2</h2>
<div class="single-faq">
<h3>This is a question 4</h3>
<div class="icon-faq">
<span class="minus">+</span>
<span class="plus">–</span>
</div>
<div class="nodisplay collapse" style="display: none;">
<div class="lazyblock-content " id="content-extra-1sQXGa">
<div class="row">
<div class="col-md-12">
<p>This is just a test for question 4</p>
</div>
</div>
</div>
</div>
</div>
<div class="single-faq">
<h3>This is a question 5</h3>
<div class="icon-faq">
<span class="minus">+</span>
<span class="plus">–</span>
</div>
<div class="nodisplay collapse" style="display: none;">
<div class="lazyblock-content " id="content-extra-ZioRKT">
<div class="row">
<div class="col-md-12">
<p>This is just a test for question 5</p>
</div>
</div>
</div>
</div>
</div>
<div class="single-faq">
<h3>This is a quesition 6 and it has a weird layout</h3>
<div class="icon-faq">
<span class="minus">+</span>
<span class="plus">–</span>
</div>
<div class="nodisplay collapse" style="display: none;">
<div class="lazyblock-content " id="content-extra-2fxKyB">
<div class="row">
<div class="col-md-12">
<p>This is just a test for question 6</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

代码就是这样工作的。用户将在输入字段中插入一个字符串，然后在div中搜索单词，类为"no display"，确切地说是在其HTML中(我必须指定它，因为在原始代码中，特定的div内部将有HTML，而不仅仅是文本(。

该代码有两个注意事项：

1. 我不得不添加一个延迟函数，因为出于某种原因，如果没有它，它只适用于前两个字符，那么它将无法找到任何其他单词。

2. 连接到问题1，如果你试图在输入字段中插入另一个值(字符串(，它将无法正确重置，也就是说，它将找不到任何不同的单词。举个例子：我将插入单词test，然后如果我试图从中删除一个单词，(字符串tes(它仍然会将该单词包装在标记中。但是，如果我在末尾再次添加字符T，它将找不到带有单词test的div，代码将失败。

3. 此外，在重置为初始值(val.length==0(之前，我会看到每个单词都被包装在标签中。

是bug还是我遗漏了什么？

Answer 1

对于1(和2((延迟无关(，您的问题是比较let text=使用当前html，而不是原始htmltochange。

经过搜索，当前html现在具有<mark>标记。

因此，如果你搜索" is "，你的html会从This is the变为This<mark> is </mark>the——当你搜索" is the"时，它在<mark> is </mark>the上不匹配。

代替.html()，使用.text()获取不带标记的文本，然后它就可以正常工作(至少是那部分，没有检查其余部分，例如也更改原始htmltochange(。这也意味着你不会得到误报，例如搜索"；div"；在您的原始代码中；div"；每个答案都显示在html中，所以它们都显示出来了。

searchtarget.each(function(index) {
let text = $(this).text().toLowerCase();

3. 重置为初始值(val.length＝＝＝0(将看到每个单词都被包装在标签中

这是由于ifs的顺序——第一个if查找空白并高亮显示它们，第二个则隐藏它们。

颠倒顺序，使其首先检查length===0，然后仅在不为0时进行搜索。

更新小提琴：

const searchfaq = $('#text-search');
const searchtarget = $(".nodisplay");
const htmltochange = searchtarget.map(function() {
return $(this).children().find('p').text();
}).get();
function delay(callback, ms) {
var timer = 0;
return function() {
var context = this,
args = arguments;
clearTimeout(timer);
timer = setTimeout(function() {
callback.apply(context, args);
}, ms || 0);
};
}
searchfaq.keyup(delay(function(e) {
let val = $(this).val().toLowerCase();
//console.log(val)
searchtarget.hide();
searchtarget.prev().children('.minus').removeClass('rotate');
searchtarget.each(function(index) {
let text = $(this).text().toLowerCase();
let paragraph = $(this).children().find('p');
let otherparagraph = searchtarget.children().find('p');
if (val.length === 0) {
paragraph[0].innerHTML = htmltochange[index];
$(this).hide();
searchtarget.prev().children('.minus').removeClass('rotate');
}
else if (text.indexOf(val) != -1) {
$(this).show();
$(this).prev().children('.minus').addClass('rotate');
var re = new RegExp(val, 'gi');
paragraph[0].innerHTML = htmltochange[index].replace(re, `<mark>$&</mark>`);
}
});
}, 500));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="lazyblock-faq-search">
<h1>Frequently Asked Questions</h1>
<form _lpchecked="1">
<input id="text-search" type="text" aria-label="search-for-answers" placeholder="Search for answers">
</form>
</div>
<div class="lazyblock-faq">
<div class="row">
<aside class="col-md-3">
<ul class="sticky-top">
<li class="active">
<a href="#chapter-1">Chapter 1</a>
</li>
<li class="">
<a href="#chapter-2">Chapter 2</a>
</li>
</ul>
</aside>
<div class="question-and-answer col-md-9">
<h2 id="chapter-1">Chapter 1</h2>
<div class="single-faq">
<h3>This is a question</h3>
<div class="icon-faq">
<span class="minus">+</span>
<span class="plus">–</span>
</div>
<div class="nodisplay collapse" style="display: none;">
<div class="lazyblock-content " id="content-extra-Z2cLmzB">
<div class="row">
<div class="col-md-12">
<p>This is the answer</p>
</div>
</div>
</div>
</div>
</div>
<div class="single-faq">
<h3>This is a question 2</h3>
<div class="icon-faq">
<span class="minus">+</span>
<span class="plus">–</span>
</div>
<div class="nodisplay collapse" style="display: none;">
<div class="lazyblock-content " id="content-extra-ZhBtAi">
<div class="row">
<div class="col-md-12">
<p>This is the answer 2</p>
</div>
</div>
</div>
</div>
</div>
<div class="single-faq">
<h3>Question 3 ?</h3>
<div class="icon-faq">
<span class="minus">+</span>
<span class="plus">–</span>
</div>
<div class="nodisplay collapse" style="display: none;">
<div class="lazyblock-content " id="content-extra-ZPm3XU">
<div class="row">
<div class="col-md-12">
<p>This is the answer 3</p>
</div>
</div>
</div>
</div>
</div>
<h2 id="chapter-2">Chapter 2</h2>
<div class="single-faq">
<h3>This is a question 4</h3>
<div class="icon-faq">
<span class="minus">+</span>
<span class="plus">–</span>
</div>
<div class="nodisplay collapse" style="display: none;">
<div class="lazyblock-content " id="content-extra-1sQXGa">
<div class="row">
<div class="col-md-12">
<p>This is just a test for question 4</p>
</div>
</div>
</div>
</div>
</div>
<div class="single-faq">
<h3>This is a question 5</h3>
<div class="icon-faq">
<span class="minus">+</span>
<span class="plus">–</span>
</div>
<div class="nodisplay collapse" style="display: none;">
<div class="lazyblock-content " id="content-extra-ZioRKT">
<div class="row">
<div class="col-md-12">
<p>This is just a test for question 5</p>
</div>
</div>
</div>
</div>
</div>
<div class="single-faq">
<h3>This is a quesition 6 and it has a weird layout</h3>
<div class="icon-faq">
<span class="minus">+</span>
<span class="plus">–</span>
</div>
<div class="nodisplay collapse" style="display: none;">
<div class="lazyblock-content " id="content-extra-2fxKyB">
<div class="row">
<div class="col-md-12">
<p>This is just a test for question 6</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>