Question

我知道插件已经存在并且已经制作了插件，但是，我想自己创建插件。我被困了，因为我是jQuery / JavaScript的新手。

现在无论你键入多少个字符，整个页面都会消失，而不是显示包含我输入的字符的单词。我做错了什么？

<div class="searchOption">
    <input type="text" id="search" placeholder="search"> 
</div>
<div class="searchFound">
    <!--upon hitting enter, this div opens collapse. -->
</div>

    /*Need to get the below search code working...*/
    var thePage = $(".pageContainer");
    $("#search").keyup(function(){
        var input = $(this).val();
        console.log(input);
        //if match found, make corresponding div link appear in open collapsible div,
        // else say nothing found in open collapsible div
        thePage.each(function(index, value){
            var foundText = $(this).text().toLowerCase();
            $(value).toggle(foundText.indexOf(input) >= 0);
        });
    });

我知道toggle会因缺少一个更好的单词而让事情“切换”，但是，当我使用最接近或匹配时，该页面什么都不做。

我正在寻找帮助我建立这个的一些指导。谢谢！

Answer 1

你能澄清一下你想要达到的目标吗？也许在像JSBin或CodePen这样的网站上抛出一个简单的测试用例？

你说整个页面都消失了。听起来您希望将页面的显示“过滤”到与输入匹配的元素。您确定对thePage.each()的呼叫是否符合您的要求？你可能需要thePage.children()这样的东西。

http://api.jquery.com/each/

http://api.jquery.com/children/

详细信息取决于您正在使用的标记和相应的DOM树。但是，如果您在console.log()的电话中index同时value和thePage.each()，我认为您会看到令人惊讶的结果。

如何制作jQuery搜索功能

1 个答案: