javascript - Filtering a property with multiple values for one field - List.js and Filter.js -
i using list.js plugin along it's filter extension produce search results page allows user filter down end results make easier them find looking for.
i have been using api try , come solution in honesty little dated , not sure when last updated.
http://www.listjs.com/docs/list-api
my code follows:
html
<div id="search-results"> <div class="col-md-3"> <div class="panel panel-warning"> <div class="panel-heading">filters</div> <div class="panel-body"> <div class="search-filter"> <ul class="list-group"> <li class="list-group-item"> <div class="list-group-item-heading"> <h4>filter options</h4> </div> </li> <li class="list-group-item"> <div class="namecontainer"> <h5 class="list-group-item-heading">name</h5> </div> </li> <li class="list-group-item"> <div class="typecontainer"> <h5 class="list-group-item-heading">type</h5> </div> </li> <li class="list-group-item"> <div class="difficultycontainer"> <h5 class="list-group-item-heading">difficulty</h5> </div> </li> <li class="list-group-item"> <label>tour contains</label> <input class="search form-control" placeholder="search" /> </li> </ul> </div> </div> </div> </div> <div class="col-md-9"> <div class="panel panel-primary"> <div class="panel-heading">results</div> <div class="list panel-body"> <div class="package well"> <div class="name">niagra falls</div> <div class="type hidden">boat trip</div> <div class="difficulty">relaxed</div> </div> <div class="package well"> <div class="name">pyramids</div> <div class="type hidden">history holiday</div> <div class="difficulty">relaxed</div> </div> <div class="package well"> <div class="name">great barrier reef</div> <div class="type hidden">snorkling holiday</div> <div class="difficulty">dangerous</div> </div> <div class="package well"> <div class="name">boar hunting</div> <div class="type hidden">hunting trip</div> <div class="difficulty">active</div> </div> <div class="package well"> <div class="name">thames cruise</div> <div class="type hidden">cruise</div> <div class="difficulty">easy</div> </div> </div> <ul class="pagination"></ul> </div> </div> </div> javascript
var options = { valuenames: ['name', 'type', 'difficulty'], page: 3, plugins: [ listpagination({}) ] }; var userlist = new list('search-results', options); var updatelist = function () { var name = new array(); var type = new array(); var difficulty = new array(); $("input:checkbox[name=name]:checked").each(function () { name.push($(this).val()); }); $("input:checkbox[name=type]:checked").each(function () { type.push($(this).val()); }); $("input:checkbox[name=difficulty]:checked").each(function () { difficulty.push($(this).val()); }); var values_type = type.length > 0 ? type : null; var values_name = name.length > 0 ? name : null; var values_difficulty = difficulty.length > 0 ? difficulty : null; userlist.filter(function (item) { return (_(values_type).contains(item.values().type) || !values_type) && (_(values_name).contains(item.values().name) || !values_name) && (_(values_difficulty).contains(item.values().difficulty) || !values_difficulty) }); } userlist.on("updated", function () { $('.sort').each(function () { if ($(this).hasclass("asc")) { $(this).find(".fa").addclass("fa-sort-alpha-asc").removeclass("fa-sort-alpha-desc").show(); } else if ($(this).hasclass("desc")) { $(this).find(".fa").addclass("fa-sort-alpha-desc").removeclass("fa-sort-alpha-asc").show(); } else { $(this).find(".fa").hide(); } }); }); var all_type = []; var all_name = []; var all_difficulty = []; updatelist(); _(userlist.items).each(function (item) { all_type.push(item.values().type) all_name.push(item.values().name) all_difficulty.push(item.values().difficulty) }); _(all_type).uniq().each(function (item) { $(".typecontainer").append('<label><input type="checkbox" name="type" value="' + item + '">' + item + '</label>') }); _(all_name).uniq().each(function (item) { $(".namecontainer").append('<label><input type="checkbox" name="name" value="' + item + '">' + item + '</label>') }); _(all_difficulty).uniq().each(function (item) { $(".difficultycontainer").append('<label><input type="checkbox" name="difficulty" value="' + item + '">' + item + '</label>') }); $(document).off("change", "input:checkbox[name=type]"); $(document).on("change", "input:checkbox[name=type]", updatelist); $(document).off("change", "input:checkbox[name=name]"); $(document).on("change", "input:checkbox[name=name]", updatelist); $(document).off("change", "input:checkbox[name=difficulty]"); $(document).on("change", "input:checkbox[name=difficulty]", updatelist); i've created working example on codepen.
http://codepen.io/jasonespin/pen/bdajko
what wish achieve packages, may have multiple type values such as:
<div class="package well"> <div class="name">niagra falls</div> <div class="type hidden">boat trip</div> <div class="type hidden">other trip type</div> <div class="difficulty">relaxed</div> </div> so in situation, expect filter detect there type of boat trip , other trip type , display these options filter option. if either selected, package returned. however, seems ignore second type.
i have tried expected act array not case. mashed 2 items create random option.
<div class="package well"> <div class="name">niagra falls</div> <div class="type hidden"><div>boat trip</div><div>other trip type</div> </div> <div class="difficulty">relaxed</div> </div> so, have ideas how can adapt code accept multiple options? ideal scenario me attach number of departure dates each package , enable user filter these departure dates.
any appreciated believe issue may lodash code first time using lodash i'm little bit unsure of doing due unusual syntax.
this straightforward implement using combination of string.split() definitions , array concatenations.
html
<div id="search-results"> <div class="col-md-3"> <div class="panel panel-warning"> <div class="panel-heading">filters</div> <div class="panel-body"> <div class="search-filter"> <ul class="list-group"> <li class="list-group-item"> <div class="list-group-item-heading"> <h4>filter options</h4> </div> </li> <li class="list-group-item"> <div class="namecontainer"> <h5 class="list-group-item-heading">name</h5> </div> </li> <li class="list-group-item"> <div class="typecontainer"> <h5 class="list-group-item-heading">type</h5> </div> </li> <li class="list-group-item"> <div class="difficultycontainer"> <h5 class="list-group-item-heading">difficulty</h5> </div> </li> <li class="list-group-item"> <label>tour contains</label> <input class="search form-control" placeholder="search" /> </li> </ul> </div> </div> </div> </div> <div class="col-md-9"> <div class="panel panel-primary"> <div class="panel-heading">results</div> <div class="list panel-body"> <div class="package well"> <div class="name">niagra falls</div> <div class="type hidden">boat trip|other trip|my trip</div> <div class="difficulty">relaxed</div> </div> <div class="package well"> <div class="name">pyramids</div> <div class="type hidden">history holiday</div> <div class="difficulty">relaxed</div> </div> <div class="package well"> <div class="name">great barrier reef</div> <div class="type hidden">snorkling holiday</div> <div class="difficulty">dangerous</div> </div> <div class="package well"> <div class="name">boar hunting</div> <div class="type hidden">hunting trip</div> <div class="difficulty">active</div> </div> <div class="package well"> <div class="name">thames cruise</div> <div class="type hidden">cruise</div> <div class="difficulty">easy</div> </div> </div> <ul class="pagination"></ul> </div> </div> </div> javascript
var options = { valuenames: ['name', 'type', 'difficulty'], page: 3, plugins: [ listpagination({}) ] }; var userlist = new list('search-results', options); var updatelist = function () { var name = new array(); var type = new array(); var difficulty = new array(); $("input:checkbox[name=name]:checked").each(function () { name.push($(this).val()); }); $("input:checkbox[name=type]:checked").each(function () { if($(this).val().indexof('|') > 0){ var arr = $(this).val().split('|'); var arraylength = arr.length; type = type.concat(arr); console.log('multiple values:' + arr); }else{ type.push($(this).val()); console.log('single values:' + arr); } }); $("input:checkbox[name=difficulty]:checked").each(function () { difficulty.push($(this).val()); }); var values_type = type.length > 0 ? type : null; var values_name = name.length > 0 ? name : null; var values_difficulty = difficulty.length > 0 ? difficulty : null; userlist.filter(function (item) { var typetest; var nametest; var difficultytest; if(item.values().type.indexof('|') > 0){ var typearr = item.values().type.split('|'); for(var = 0; < typearr.length; i++){ if(_(values_type).contains(typearr[i])){ typetest = true; } } } return (_(values_type).contains(item.values().type) || !values_type || typetest) && (_(values_name).contains(item.values().name) || !values_name) && (_(values_difficulty).contains(item.values().difficulty) || !values_difficulty) }); } userlist.on("updated", function () { $('.sort').each(function () { if ($(this).hasclass("asc")) { $(this).find(".fa").addclass("fa-sort-alpha-asc").removeclass("fa-sort-alpha-desc").show(); } else if ($(this).hasclass("desc")) { $(this).find(".fa").addclass("fa-sort-alpha-desc").removeclass("fa-sort-alpha-asc").show(); } else { $(this).find(".fa").hide(); } }); }); var all_type = []; var all_name = []; var all_difficulty = []; updatelist(); _(userlist.items).each(function (item) { if(item.values().type.indexof('|') > 0){ var arr = item.values().type.split('|'); all_type = all_type.concat(arr); }else{ all_type.push(item.values().type) } all_name.push(item.values().name) all_difficulty.push(item.values().difficulty) }); _(all_type).uniq().each(function (item) { $(".typecontainer").append('<label><input type="checkbox" name="type" value="' + item + '">' + item + '</label>') }); _(all_name).uniq().each(function (item) { $(".namecontainer").append('<label><input type="checkbox" name="name" value="' + item + '">' + item + '</label>') }); _(all_difficulty).uniq().each(function (item) { $(".difficultycontainer").append('<label><input type="checkbox" name="difficulty" value="' + item + '">' + item + '</label>') }); $(document).off("change", "input:checkbox[name=type]"); $(document).on("change", "input:checkbox[name=type]", updatelist); $(document).off("change", "input:checkbox[name=name]"); $(document).on("change", "input:checkbox[name=name]", updatelist); $(document).off("change", "input:checkbox[name=difficulty]"); $(document).on("change", "input:checkbox[name=difficulty]", updatelist); codepen
Comments
Post a Comment