Question

我有一个包含大量“卡片”的网页我想在搜索字段中输入一些卡片，当我删除一个字符时，再次显示它们（全部为空时）。

我的问题是它似乎没有正常工作，我写的是“1个字符后面”，当我删除字符时它也没有显示卡片。

当我最终写出整个标准时，它也无法工作，当我遗漏一些字母时，它会找到3-4张卡片。

这是我的代码：

$('#search').keypress(function(){
        $( ".champion" ).each(function( index ) {
            if ( $( this ).find('.name-tag').text().toLowerCase().indexOf($('#search').val().toLowerCase(), 0) == -1) {
                $(this).hide();
            } else {
                $(this).show();
            }
        });
    });

我也尝试过交换它：

$('#search').keypress(function(){
    $( ".champion" ).each(function( index ) {
        if ( $('#search').val().toLowerCase().indexOf($( this ).find('.name-tag').text().toLowerCase()) == -1) {
            $(this).css('opacity', '0.7');
        } else {
            $(this).css('opacity', '1');
        }
    });
});

Answer 1

这可以通过将事件延迟大约10毫秒来实现，用户不会注意到差异，但它可以帮助您。

我为你的问题做了fiddle。

这是它基本上做的事情：

<Style TargetType="{x:Type TreeViewItem}">
    <Setter Property="HeaderTemplate">
        <Setter.Value>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <Image Name="img" Width="20" Height="20" Stretch="Fill">
                        <Image.Style>
                            <Style TargetType="{x:Type Image}">
                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding Tag}" Value="0">
                                        <Setter Property="Source" Value="Icons\Image1.png"/>
                                    </DataTrigger>
                                    <DataTrigger Binding="{Binding Tag}" Value="1">
                                        <Setter Property="Source" Value="Icons\Image2.png"/>
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </Image.Style>
                    </Image>
                    <TextBlock VerticalAlignment="Center" Text="{Binding}" Margin="5,0" />
                </StackPanel>
            </DataTemplate>
        </Setter.Value>
    </Setter>
</Style>

你的第二个问题是基于按键事件，似乎没有捕获退格键。您使用$(function () { var input = $("#entry"); input.keydown(function () { // doesn't matter if you create an anonymous method or a regular method, only the setTimeout is of value setTimeout(function () { var s = $("#show"); s.text(input.val()); }, 10); }); });事件处理程序会更好，因为它会捕获每个键。

Answer 2

由于您使用的是“按键”，因此它始终会为您提供“1个字符后面”的值。更好地使用“keyup”事件。

我认为您正在尝试根据输入的搜索文本切换不透明度。如果它与你想要的相同，请检查这个小提琴：

Live Example

JS代码：

$(function () {

    $("#search").keyup(function(){
        var $target = $("#target"); $target.find("li.champion").css("opacity", "0.7");
        $target.find("li.champion:contains('"+this.value+"')").css("opacity","1");
    });
});

HTML：

<input type="text" id="search" placeholder="type in here" />

<ul id="target">
    <li class="champion">
        <span class="name-tag">abcd</span>
    </li>
    <li class="champion">
        <span class="name-tag">abcd</span>
    </li>
    <li class="champion">
        <span class="name-tag">deds</span>
    </li>
    .....

</ul>

以下是它的完成方式：

在“搜索”字段中添加“onKeyUp”事件侦听器
使用jQuery“：contains”选择器，我们将匹配元素的不透明度设置为“1”，其他设置为“0.7” 有关“：contains”选择器Check here。

希望它有所帮助。

Answer 3

感谢您提供keyup / keydown和延迟提示。

原来我必须在测试之前存储值，这是最终的代码：

$http

显示/隐藏基于search.keypress（过滤器）的div

3 个答案: