javascript - 提交时过滤数据

Question

我正在尝试创建一个动态搜索过滤器，它将显示/隐藏某些州和城市的属性，并根据搜索结果更新显示的属性数量。

我能够部分地使某些东西起作用，但是当涉及到动态计数时，有些东西不起作用。

首先，我是这样设置 HTML 的:

var numProperties = $('.c-property:visible').length;

$('.c-properties-summary__count').html(numProperties);

$('.c-search').submit(function(e){
    e.preventDefault();

    var userData = $('input[type="search"]').val().toLowerCase();

    $('.c-property').each(function(){
        var propertyState = $(this).data('state'),
            propertyCity  = $(this).data('city'),
            numProperties = $('.c-property:visible').length;

        if (userData.length) {
            if (userData === propertyState) {
                $(this).show();
            } else if (userData === propertyCity) {
                $(this).show();
            } else {
                $(this).hide();
            }
        } else {
            $(this).show();
        }

        $('.c-properties-summary__count').html(numProperties);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="c-properties-summary">
    <h3><span class="c-properties-summary__count"></span> Properties</h3>
</div>

<form class="c-search" action="/">
    <label for="location">Location</label>
    <input name="location" type="search" value="" placeholder="State or City">
    <input class="c-btn c-btn--blue" type="submit" value="Filter">
</form>

<ul class="c-properties">
    <li class="c-property" data-state="az" data-city="avondale">Avondale</li>
    <li class="c-property" data-state="az" data-city="tempe">Tempe</li>
    <li class="c-property" data-state="az" data-city="phoenix">Phoenix</li>
    <li class="c-property" data-state="al" data-city="birmingham">Birmingham</li>
    <li class="c-property" data-state="fl" data-city="tallahassee">Tallahassee</li>
</ul>

截至目前，该脚本似乎只在第一次尝试时有效。例如，如果我尝试搜索 AZ，它会隐藏所有其他属性并返回正确的计数 3。现在，如果我立即尝试再次搜索 FL，它会正确隐藏所有其他属性，但显示的计数不正确，即使只显示一个属性，它也会显示 2。

我已经研究了几个小时，所以如果有人可以提供一些指导，我将不胜感激。

Answer 1

无需使用任何循环进行搜索。假设你有10000条数据，那么它肯定会影响你的网页性能。

尝试使用下面较短的代码而不是使用长代码。

function startSearching() {
    $("ul.c-properties li").show();
    var strUserInput = $.trim($('input[type="search"]').val().toLowerCase());
    if (strUserInput)
    {
        $("ul.c-properties li").hide();
        $('li[data-state*="' + strUserInput + '"]').show();
        $('li[data-city*="' + strUserInput + '"]').show();
    }
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="c-properties-summary">
    <h3><span class="c-properties-summary__count"></span> Properties</h3>
</div>

<form class="c-search" action="/">
    <label for="location">Location</label>
    <input name="location" type="search" value="" placeholder="State or City">
    <input class="c-btn c-btn--blue" type="button" value="Filter" onclick="startSearching()">
</form>

<ul class="c-properties">
    <li class="c-property" data-state="az" data-city="avondale">Avondale (az)</li>
    <li class="c-property" data-state="az" data-city="tempe">Tempe (az)</li>
    <li class="c-property" data-state="az" data-city="phoenix">Phoenix (az)</li>
    <li class="c-property" data-state="al" data-city="birmingham">Birmingham (al)</li>
    <li class="c-property" data-state="fl" data-city="tallahassee">Tallahassee (fl)</li>
</ul>