Javascript divs中的LiveFilter
我有一个关于LiveFilter的问题。或者,如何在没有LiveFilter的情况下以另一种方式实现这一点并不重要。所以我得到了页面和div,它们是从JSON文件生成的。我的过滤器坏了。所以我的页面是这样的,当我开始按名字或号码搜索时,应该是这样的 所以我使用jquery.livefilter.jsJavascript divs中的LiveFilter,javascript,jquery,html,json,Javascript,Jquery,Html,Json,我有一个关于LiveFilter的问题。或者,如何在没有LiveFilter的情况下以另一种方式实现这一点并不重要。所以我得到了页面和div,它们是从JSON文件生成的。我的过滤器坏了。所以我的页面是这样的,当我开始按名字或号码搜索时,应该是这样的 所以我使用jquery.livefilter.js <script> // Reading DATA from JSON $(document).ready(function(){ $.getJSON("a
<script> // Reading DATA from JSON
$(document).ready(function(){
$.getJSON("accounts.json", function(data){
$.each(data, function(key, value){
$("#main_list").append(
buildRow(value.name
,value.number
,value.city,value.amount,value.currency,value.rate)
);
});
});
});
</script>
<script>
$(function(){
$('#livefilter-list').liveFilter('#livefilter-input', 'li', {
filterChildSelector: 'a'
});
});
</script>
<script> // Making divs from JSON
function buildRow(a,b,c,d,e,f){
return '<ul id="livefilter-list"><div class="deposit-small-block first-block size-small-block tt" onclick="view(\'t1\'); return false">\
<div class="button_block">\
<div class="div-for-button">\
<input type="radio" name="on">\
</div>\
</div>\
<div class="deposit-form-block-name">\
<div class="deposit-form-block-name-first white-text"><name><li>'+a+'</li></name></div>\
<div class="deposit-form-block-name-second white-text"><number><li>'+b+'</li></number></div>\
<div class="deposit-form-block-name-third white-text"><city>'+c+'</city></div>\
</div>\
<div class="deposit-form-block-sum">\
<div class="deposit-form-block-sum-text white-text">\
<amount>'+d+'</amount><br><currency>'+e+'</currency>\
</div>\
</div>\
<div class="deposit-form-block-perc">\
<div class="deposit-form-block-sum-text white-text"><rate>'+f+'</rate></div>\
</div>\
</div>\
</ul>'
}
</script>
//从JSON读取数据
$(文档).ready(函数(){
$.getJSON(“accounts.json”),函数(数据){
$。每个(数据、函数(键、值){
$(“#主列表”)。追加(
buildRow(value.name)
,value.number
,value.city,value.amount,value.currency,value.rate)
);
});
});
});
$(函数(){
$('#livefilter list').livefilter('#livefilter input',li'{
filterChildSelector:“a”
});
});
//从JSON生成div
函数构建行(a、b、c、d、e、f){
返回“\
\
\
\
\
\
\
- “+a+”
\
- “+b+”
\
“+c+”\
\
\
\
“+d+”
“+e+”\
\
\
\
“+f+”\
\
\
'
}
有人能告诉我问题出在哪里吗
这是我的rar文件(html、css、js、json)忘记…您的HTML太复杂,无法使用。
我为你做了一个很小的剧本。。。。为您的网页定制 工作原理:
在
input
事件中,隐藏所有行
然后在
、
和
内容中搜索输入值。。。对于每一行,使用JavaScript方法.indexOf()
如果找到搜索词,则必须显示此行
// Custom search
$("#livefilter-input").on("input",function(){
//console.log("Searching...");
// Set ALL rows to display none.
$(".deposit-small-block").css("display","none");
// Loop to check the content of all custom tags: <name> <number> and <city>
$(".tt").find(".deposit-form-block-name .white-text").children().each(function(){
// If a matching text is found within name, account # or city
if( $(this).html().indexOf( $("#livefilter-input").val() ) != -1 ){
//console.log("FOUND a match!");
// Set this row to display block.
$(this).closest(".deposit-small-block").css("display","block");
}
});
});
不能拿起超过2个链接,所以这里是我的文件链接-再次非常感谢。所以如果我想进行不区分大小写的搜索,我应该加上toLowerCase,对吗?对。在这两个元素上进行比较。我编辑了我的答案。请检查搜索输入的id。。。在本例中,它是
livefilter输入
。但是您应该将其更改为类似于myCustomSearch
。。。描述性类和ID是有用的。;)
if( $(this).html().toLowerCase().indexOf( $("#livefilter-input").val().toLowerCase() ) != -1 ){