Using a dropdown select to sort items in list.js

Question

I'm using the plugin list.js to sort a list of items. Currently the example shows a searchbar for filtering, I want to use a drop down select to filter more precisely between two materials "glass" and "plastic".

Here is my fiddle: http://jsfiddle.net/32u3t1g9/6/ (granted that list.js doesn't play well with it.)

EDIT: updated fiddle with the jquery plug in

Here is my 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 by type</li>
            <li class="sort btn" data-sort="thickness">Sort by thickness</li>
            <li class="sort btn" data-sort="height">Sort by height</li>
            <li class="sort btn" data-sort="category">Sort by style</li>
          </ul>

          <ul class="filter">
             <li>
            <select name="material" id="filter-material">
            <option selected="selected" value="material">Select a 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 the list
    featureList.filter(function (item) {
        if (item.values().material == selection) {
            return true;
        } else {
            return false;
        }
    });

});

$('#filter-scientific').click(function() {
  featureList.filter(function(item) {
    if (item.values().category == "scientific") {
      return true;
    } else {
      return false;
    }
  });
  return false;
});

$('#filter-artsy').click(function() {
  featureList.filter(function(item) {
    if (item.values().category == "artsy") {
      return true;
    } else {
      return false;
    }
  });
  return false;
});

$('#filter-none').click(function() {
  featureList.filter();
  return false;
});

you need to include the plugin file in the demo otherwise we have no idea of it's source — charlietfl
– charlietfl, Commented Nov 13, 2014 at 21:00

John S · Accepted Answer · 2014-11-13 22:06:26Z

9

You need to change the values of your select options:

<select name="material" id="filter-material">
    <option selected="selected" value="">Select a Material</option>
    <option value="plastic">Plastic</option>
    <option value="glass">Glass</option>
</select>

Then the change-event handler can look like this:

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

answered Nov 13, 2014 at 22:06

John S

21.5k9 gold badges50 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

knocked loose Over a year ago

Tossed this into my code and it works perfectly! Thanks for all the help, I was stuck on this for hours! haha appreciate it man!

Tandroid · Accepted Answer · 2016-05-13 17:31:32Z

The accepted answer works fine when there is only one select list, but fails when there are more. Here is a way you can accomplish the same thing using any number of select filters.

<select name="material" class="select-filter">
    <option selected="selected" value="">Select a Material</option>
    <option value="plastic">Plastic</option>
    <option value="glass">Glass</option>
</select>

var selectFilterValues = {
  material: '',
  otherSelectListName: ''
};

$('.select-filter').change(function() {
  var selection = this.value,
    name = $(this).attr('name');

  selectFilterValues[name] = selection;

  featureList.filter(function(item) {
    var values = item.values(),
      matches = 0,
      length = 0;

    $.each(selectFilterValues, function(key, val) {
      length++;

      if (values[key].trim() == val || val === '') {
        matches++;
      }
    });

    return (matches === length);
  });
});

Collectives™ on Stack Overflow

Using a dropdown select to sort items in list.js

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related