javascript - Using a dropdown select to sort items in list.js -

javascript - Using a dropdown select to sort items in list.js -

i'm using plugin list.js sort list of items. illustration shows searchbar filtering, want utilize drop downwards select filter more exactly between 2 materials "glass" , "plastic".

here fiddle: http://jsfiddle.net/32u3t1g9/6/ (granted list.js doesn't play it.)

edit: updated fiddle jquery plug in

here code:

html

<div id="container"> <div class="page"> <div> <h1>piece-y search</h1> </div> <div id="main"> <div class="c1"> <h2>piece search</h2> <div id="piece-search"> <ul class="sort-by"> <li> <input class="search" placeholder="search pieces" /> </li> <li class="sort btn" data-sort="type">sort type</li> <li class="sort btn" data-sort="thickness">sort thickness</li> <li class="sort btn" data-sort="height">sort height</li> <li class="sort btn" data-sort="category">sort style</li> </ul> <ul class="filter"> <li> <select name="material" id="filter-material"> <option selected="selected" value="material">select material</option> <option value="material">plastic</option> <option value="material">glass</option> </select> </li> <li class="btn" id="filter-none">show all</li> <li class="btn" id="filter-scientific" value="category">only show scientific glass</li> <li class="btn" id="filter-artsy" value="category">only show artsy glass</li> </ul> <ul class="list"> <li class="item"> <p class="sorting-info hide-this"> <p class="material">plastic</p> <p class="type">pipe</p> <p class="thickness">3mm</p> <p class="height">15inch+</p> <p class="category">artsy</p> </p> </li> <li class="item"> <p class="sorting-info hide-this"> <p class="material">glass</p> <p class="type">pipe</p> <p class="thickness">5mm</p> <p class="height">14inch-</p> <p class="category">scientific</p> </p> </li> </ul> </div> </div> </div> </div> <!-- end of #container -->

js

var options = { valuenames: [ 'material', 'type', 'thickness', 'height', 'category' ] }; var featurelist = new list('piece-search', options); $('#filter-material').change(function () { var selection = this.value; // filter items in list featurelist.filter(function (item) { if (item.values().material == selection) { homecoming true; } else { homecoming false; } }); }); $('#filter-scientific').click(function() { featurelist.filter(function(item) { if (item.values().category == "scientific") { homecoming true; } else { homecoming false; } }); homecoming false; }); $('#filter-artsy').click(function() { featurelist.filter(function(item) { if (item.values().category == "artsy") { homecoming true; } else { homecoming false; } }); homecoming false; }); $('#filter-none').click(function() { featurelist.filter(); homecoming false; });

you need alter values of select options:

<select name="material" id="filter-material"> <option selected="selected" value="">select material</option> <option value="plastic">plastic</option> <option value="glass">glass</option> </select>

then change-event handler can this:

$('#filter-material').change(function () { var selection = this.value; if (selection) { featurelist.filter(function(item) { homecoming (item.values().material == selection); }); } else { featurelist.filter(); } });

javascript jquery filter html-select