动态搜索功能显示/隐藏div [英] Dynamical search-function to show/hide divs

问题描述

这是我在StackOverflow上的第一篇文章。

 < input type =Textid =filterTextBoxplaceholder =按名称过滤/> 
< script type =text / javascriptsrc =/ 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，如果你输入Digital Electronics，它将只显示包含文本Digital Electronics II和Digital Electronics的Div。现在，如果我随机输入乱码，它会隐藏所有应有的内容，但是当我键入课程名称的开头，它不会隐藏不包含特定文本字符串的课程。

这是我使用的一个示例（它可以正常工作）： http://jsfiddle.net/Da4mX/

难以解释，但我希望你能意识到，如果你在我的页面上尝试搜索功能。另外，我对JavaScript非常陌生，并且我将搜索框的字符串设置为var search，其余部分我不是这样确定。

请帮我分解脚本，并指出我要出错的地方，以及如何解决问题。

解决方案

您的问题在那里：

  return $（ .course，this）
  

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

在内部，选择器上下文是用.find（）方法
所以$（span，this）相当于$（this）.find（span）

过滤器函数已经检查每个元素
，然后，当您尝试在上下文中放置$（。course）时，它将再次获取所有元素...

有效的代码：

  $（＃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

this is my first post on StackOverflow. I hope it doesn't go horribly wrong.

<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>

I have a javascript snippet like this on my school project, which can be found here: http://www.cc.puv.fi/~e1301192/projekti/tulos.html

So the search bar at the bottom is supposed to filter divs and display only those, that contain certain keyword. (t.ex, if you type Digital Electronics, it will display only Divs that contain text "Digital Electronics II" and "Digital Electronics". Right now, if I type random gibberish, it hides everything like it's supposed to, but when I type in the beginning of a course name, it will not hide the courses that dont contain the certain text-string.

Here is an example that I used (which works fine): http://jsfiddle.net/Da4mX/

Hard to explain, but I hope you realize if you try the search-function on my page. Also, I'm pretty new to javascript, and I get the part where you set the searchbox's string as var search, the rest I'm not so sure about.

Please help me break down the script, and possibly point where I'm going wrong, and how to overcome the problem.

解决方案

Your problem is there :

return $(".course", this)

From jquery doc: http://api.jquery.com/jQuery/#jQuery-selection

Internally, selector context is implemented with the .find() method, so $( "span", this ) is equivalent to $( this ).find( "span" )

filter function already check each elements then, when you try to put $(".course") in context, it will fetch all again...

Valid code :

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

In fact, you can alternatively use :contains() CSS selector, but, it is not optimized for a large list and not crossbrowser

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

这篇关于动态搜索功能显示/隐藏div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！