提交时筛选数据
Filter Data on Submit
我正在尝试创建一个动态搜索过滤器,该过滤器将显示/隐藏某些州和城市的房产,并根据搜索结果更新显示的属性数量。
我能够部分地让一些东西工作,但在动态计数方面有些东西不起作用。
因此,首先,这就是我设置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。
我已经做了几个小时了,所以如果有人可以提供一些指导,将不胜感激。
无需使用任何循环进行搜索。假设如果您有 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>
修复了它。在下面查看我的片段。您需要将这些语句放在:
numProperties = $('.c-property:visible').length;
$('.c-properties-summary__count').html(numProperties);
在你用类c-property
遍历每个li
的块之外
片段:
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');
$(this).toggle(!userData || userData === propertyState || userData === propertyCity);
});
numProperties = $('.c-property:visible').length;
$('.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>
相关文章:
- 可以't从AJAX请求中筛选数据
- Angularjs使用父数据的单键多值进行筛选
- 数据表自定义筛选
- 自定义筛选器不'我不使用django数据表视图创建的ajax.data.Json
- 用于筛选无模式集合的最快数据结构
- 数据表 AJAX 筛选器重新加载数据
- 数据表 + 服务器端处理 + 搜索筛选
- UI网格单一筛选器无法处理复杂数据
- 用于筛选数据的函数--if.else语句
- 无法使用Angular.js从列表中正确筛选数据
- 我们可以将控制器中的JSON数据(MM/DD/YYYY格式)与今天的's日期,并在数组中显示筛选列表
- 正在筛选回调函数中的数据
- 使用new date()将数据与当前日期的MM/DD/YYYY格式的日期进行比较和筛选,同时从用户输入值中减去new d
- 筛选源数据后的项目工具提示
- 筛选包含大数据的html表(超过12K行)
- 仅根据DataTables中第一列的下拉值筛选表数据
- 使用查询字符串参数筛选数据
- 数据表复制,只保存单个多重筛选选择的选定行
- 使用带选择框的Isotop进行数据筛选
- 数据筛选滚动列表