Question

这是我在StackOverflow上的第一篇文章。我希望它不会出现可怕的错误。

<input type="Text" id="filterTextBox" placeholder="Filter by name"/>
<script type="text/javascript" src="/resources/events.js"></script>
<script>
$("#filterTextBox").on("keyup", function () {
    var search = this.value;
    $(".kurssikurssi").show().filter(function () {
        return $(".course", this).text().indexOf(search) < 0;
    }).hide();        
});

</script>

我的学校项目中有一个这样的javascript代码段，可在此处找到：http://www.cc.puv.fi/~e1301192/projekti/tulos.html

因此底部的搜索栏应该过滤div并仅显示包含特定关键字的那些。（t.ex，如果你输入数字电子产品，它将只显示包含文字的Divs＆＃34; Digital Electronics II＆＃34;＆＃34; Digital Electronics＆＃34;。现在，如果我输入随机乱码，它隐藏所有类似的内容，但是当我输入课程名称的开头时，它不会隐藏不包含特定文本字符串的课程。

以下是我使用的示例（工作正常）：http://jsfiddle.net/Da4mX/

很难解释，但我希望您在我的页面上尝试搜索功能时会意识到。另外，我对javascript很陌生，而且我得到了将搜索框的字符串设置为var搜索的部分，其余的我不太确定。

请帮我分解剧本，并指出我出错的地方，以及如何克服这个问题。

Answer 1

在您的情况下，我认为您显示和隐藏课程的父级，以便您可以尝试

$("#filterTextBox").on("keyup", function () {
    var search = $(this).val().trim().toLowerCase();
    $(".course").show().filter(function () {
        return $(this).text().toLowerCase().indexOf(search) < 0;
    }).hide();        
});

Answer 2

试试这个现在正在运行，将此代码粘贴到控制台中并通过搜索检查。

$("#filterTextBox").on("keyup", function () {
    var search = this.value;  if( search == '') { return } 
 $( ".course" ).each(function() {
   a = this; if (a.innerText.search(search) > 0 ) {this.hidden = false} else {this.hidden = true}
 }); })

检查并且搜索现在正在运行。

Answer 3

你的问题在那里：

return $(".course", this)

来自jquery doc：http://api.jquery.com/jQuery/#jQuery-selection

在内部，选择器上下文是使用.find（）方法实现的，所以$（＆＃34; span＆＃34;，this）相当于$（this）.find（＆＃34; span＆＃34;）

过滤功能已经检查了每个元素那么，当你试图将$（＆＃34; .course＆＃34;）置于上下文中时，它将再次获取所有内容......

有效代码：

$("#filterTextBox").on('keyup', function()
{
    var search = $(this).val().toLowerCase();
    $(".course").show().filter(function()
    {
        return $(this).text().toLowerCase().indexOf(search) < 0;
    }).hide();
});

实际上，您也可以使用：contains（）CSS选择器，但是，它并没有针对大型列表进行优化，也没有针对整个浏览器进行优化

http://caniuse.com/#search=contains

Answer 4

您正在访问错误的元素。这应该有效：

$(".kurssikurssi").find('.course').show().filter(function () {
      var $this = $(this)
      if($this.text().indexOf(search) < 0){
              $this.hide()
      }
 })

用于显示/隐藏div的动态搜索功能

4 个答案: