键入fast时，HTML DOM上的JavaScript搜索不起作用

我在HTML页面中的元素上实现了一个简单的javascript搜索。 除了键入快速搜索代码隐藏DOM中的每个元素而不显示任何内容外，其他一切都正常。这是我的密码

例如，先缓慢搜索单词

lorem

，然后快速搜索。当我们快速搜索时，整个元素都会消失。

---

有人能指出我这里做错了什么吗？

好吧，我查了你的代码。当您使用keyup事件调用doSearch函数时，同时使用fadeIn函数隐藏/显示数据。我想用一个示例来说明这个问题，当您键入任何字符时，它会隐藏所有文本（时间跨度很小），然后显示结果（基于doSearch函数）。因此，当您键入fast时，它会在每次键打开时调用doSearch函数，因此它会在空文本上调用doSearch函数（因为上一次调用没有返回结果，所以文本仍然隐藏）。也许您需要使用某种限制来绑定doSearch函数，在文本未显示之前，它不会被调用

编辑：只需更改行：
CharityNames.parents（“li”）.fadeIn（）； CharityText.parents（“li”）.fadeIn（）； 到 CharityNames.parents（“li”）.show（）； CharityText.parents（“li”）.show（）

---

它会很好的工作。但是我不知道你是否需要在文本中淡入淡出。

好吧，我查看了你的代码。当您使用keyup事件调用doSearch函数时，同时使用fadeIn函数隐藏/显示数据。我想用一个示例来说明这个问题，当您键入任何字符时，它会隐藏所有文本（时间跨度很小），然后显示结果（基于doSearch函数）。因此，当您键入fast时，它会在每次键打开时调用doSearch函数，因此它会在空文本上调用doSearch函数（因为上一次调用没有返回结果，所以文本仍然隐藏）。也许您需要使用某种限制来绑定doSearch函数，在文本未显示之前，它不会被调用

编辑：只需更改行：
CharityNames.parents（“li”）.fadeIn（）； CharityText.parents（“li”）.fadeIn（）； 到 CharityNames.parents（“li”）.show（）； CharityText.parents（“li”）.show（）

它会很好的工作。但是我不知道你是否需要在课文中淡入淡出

这是一个建议，而不是问题的解决方案，询问您的代码为什么不能按预期工作

您的逻辑看起来有点复杂，函数调用太多会降低性能

如果有兴趣，这里有一个小样本，它正是你需要的

//This is a extension to do case insensitive search. Extension Name "containsCIn"
$.extend($.expr[':'], {
  'containsCIn': function(elem, i, match, array) {
    return (elem.textContent || elem.innerText || '').toLowerCase()
      .indexOf((match[3] || "").toLowerCase()) >= 0;
  }
});

// this is the sample code which filters the content on search string
$(function() {
  $('#txtesearch').on('keyup', function() {
    var searchtext = $(this).val();

    $('ul.charity-listing, ul.charity-listing li').hide();
    $('ul.charity-listing li:containsCIn("' + searchtext + '")').show();   

    $('ul.charity-listing').fadeIn({duration: 200}); // default is 400, i reduced the time to make it render fast.
  });
});

这是一个建议，而不是问题的解决方案，询问您的代码为什么不能按预期工作

您的逻辑看起来有点复杂，函数调用太多会降低性能

如果有兴趣，这里有一个小样本，它正是你需要的

//This is a extension to do case insensitive search. Extension Name "containsCIn"
$.extend($.expr[':'], {
  'containsCIn': function(elem, i, match, array) {
    return (elem.textContent || elem.innerText || '').toLowerCase()
      .indexOf((match[3] || "").toLowerCase()) >= 0;
  }
});

// this is the sample code which filters the content on search string
$(function() {
  $('#txtesearch').on('keyup', function() {
    var searchtext = $(this).val();

    $('ul.charity-listing, ul.charity-listing li').hide();
    $('ul.charity-listing li:containsCIn("' + searchtext + '")').show();   

    $('ul.charity-listing').fadeIn({duration: 200}); // default is 400, i reduced the time to make it render fast.
  });
});

@阿图尔·朱奈德·艾哈迈德确实提出了一个正确的答案，答案中有相应的代码！我刚在你的电脑上测试过，效果很好。@Athul Junaid Ahmad确实建议了一个正确的答案，答案中有相应的代码！我刚在你的电脑上测试过，效果很好。