按关键字jquery过滤

Question

我一直在寻找可以在我的网页上实现一个按关键字过滤的输入框的方法，就像buysellads.com 在此处使用的那样，您可以在其中输入与该网站相关的关键字并自动过滤列表。 例如，如果您键入“ photoshop”，它将捕获所有包含带有Photoshop标签的网站。

我也想在通过“ photoshop”进行过滤时按下“添加”按钮后实现该功能，“ photoshop”一词将被放置在输入框下方，并带有“ x”按钮以关闭该特定过滤器。 是否也使用jquery完成？

在这方面的任何帮助将是巨大的，谢谢。

这是我当前正在处理的页面的代码，并希望实现以上示例。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Checkbox Filter Test</title>
<style type="text/css">
@import url(css/screen.css);
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("input.type_check").click(function() {
            if($(this).is(':checked')) {
                $("#events li."+$(this).attr('id')).removeClass('type_hidden');
                $("#events li").not(".type_hidden, .start_hidden, .color_hidden").slideDown();
            } else {
                $("#events li."+$(this).attr('id')).addClass('type_hidden');
                $("#events li."+$(this).attr('id')).slideUp();
            }
        });

        $("input.start_check").click(function() {
            if($(this).is(':checked')) {
                $("#events li."+$(this).attr('id')).removeClass('start_hidden');
                $("#events li").not(".type_hidden, .start_hidden, .color_hidden").slideDown();
            } else {
                $("#events li."+$(this).attr('id')).addClass('start_hidden');
                $("#events li."+$(this).attr('id')).slideUp();
            }
        });
        $("input.color_check").click(function() {
            if($(this).is(':checked')) {
                $("#events li."+$(this).attr('id')).removeClass('color_hidden');
                $("#events li").not(".type_hidden, .start_hidden, .color_hidden").slideDown();
            } else {
                $("#events li."+$(this).attr('id')).addClass('color_hidden');
                $("#events li."+$(this).attr('id')).slideUp();
            }
        });
    });
</script>
</head>
<body>
<h2>FILTER PRODUCTS BY:</h2>
<div id="sport-cat">
<p>Sport:</p>
<div>
    <input name="type[]" type="checkbox" id="type_4" value="4" class="type_check" checked="checked" />
    <label for="type_4">Soccer</label>
</div>
<div>
    <input name="type[]" type="checkbox" id="type_1" value="1" class="type_check" checked="checked" />
    <label for="type_1">Baseball/ Softball</label>
</div>
<div>
    <input name="type[]" type="checkbox" id="type_2" value="2" class="type_check" checked="checked" />

    <label for="type_2">Basketball</label>
</div>
<div>
    <input name="type[]" type="checkbox" id="type_5" value="5" class="type_check" checked="checked" />
    <label for="type_5">Boxing</label>
</div>
<div>
    <input name="type[]" type="checkbox" id="type_3" value="3" class="type_check" checked="checked" />
    <label for="type_3">Football</label>

</div>
<div>
    <input name="type[]" type="checkbox" id="type_0" value="0" class="type_check" checked="checked" />
    <label for="type_0">Golf</label>
</div>
</div>
<div id="model-cat">
<p>Model:</p>
<div>
    <input name="start[]" type="checkbox" id="start_072009" value="072009" class="start_check" checked="checked" />
    <label for="start_072009">T-Shirts</label>
</div>

<div>
    <input name="start[]" type="checkbox" id="start_082009" value="082009" class="start_check" checked="checked" />
    <label for="start_082009">Shorts</label>
</div>
<div>
    <input name="start[]" type="checkbox" id="start_092009" value="092009" class="start_check" checked="checked" />
    <label for="start_092009">Hats & Caps</label>
</div>
<div>
    <input name="start[]" type="checkbox" id="start_102009" value="102009" class="start_check" checked="checked" />

    <label for="start_102009">Jackets</label>
</div>
</div>
<div id="color-cat">
<p>Color:</p>
<div>
    <input name="color[]" type="checkbox" id="color_072010" value="072010" class="color_check" checked="checked" />
    <label for="color_072010">Black</label>
</div>

<div>
    <input name="color[]" type="checkbox" id="color_082010" value="082010" class="color_check" checked="checked" />
    <label for="color_082010">Blue</label>
</div>
<div>
    <input name="color[]" type="checkbox" id="color_092010" value="092010" class="color_check" checked="checked" />
    <label for="color_092010">Green</label>
</div>

</div>
<h2>Results</h2>
<ul id="events">
    <li id="event_1768" class="type_1 start_072009 color_072010">
            <h3>BASEBALL/SOFTBALL - Nike Manny Pacquiao (Giants) Men's T-Shirt</h3>
    </li>
    <li id="event_2190" class="type_2 start_072009 color_082010">
            <h3>LeBron Vs. Men's T-Shirt</h3>

    </li>
    <li id="event_2191" class="type_2 start_082009 color_092010">
            <h3>Kobe Supreme Men's Basketball Shorts</h3>
    </li>
    <li id="event_1864" class="type_2 start_072009 color_082010">
            <h3>Kobe Vs. Men's T-Shirt</h3>
    </li>
</ul>
</body>
</html>

编辑：

以下是我已添加到页面的新输入字段。 我想知道如何在输入框中输入“ Kobe”之类的内容并按下添加链接/按钮，然后使用jquery仅在其中显示单词“ Kobe”的项目。 我目前不需要自动完成功能。 我不知道如何做到这一点的jQuery。

<ul>   
    <li class="section keyword">
    <input id="newtag" class="text" type="text" value="filter by keyword" name="keyword"/>
        <ul class="buttons">
            <li class="button add">
                <a id="addtag" href="#">
                    <em>Add</em>
                </a>
            </li>
        </ul>
    <ul id="existingtags" class="keywords"> </ul>
    </li>
</ul>

另外，当在输入中键入“ Kobe”时，我希望输入（Kobe）中的类型显示在无序列表“ existingtags”中，然后单击它会删除过滤器。（我希望这很有意义）

感谢您的任何帮助。

Answer 1

我相信您正在寻找自动完成插件 。