list.js is using search box as default. Anyone know, how to use dropdown selection box for list.js?

I have used:

Javascript:

<script type="text/javascript">
$('#tpi').change(function () {
    var selection = this.value; //grab the value selected
var options = { valueNames: [ 'name', 'type', 'tpi' ]
};
var userList = new List('users', options);  
   });
</script>

HTML

      <select name="tpi" id="tpi">
        <option selected="selected" value="tpi">TPI</option>
        <option value="11">11</option>
        <option value="14">14</option>
        <option value="16">16</option>
        <option value="18">18</option>
        <option value="19">19</option>
      </select>

But not working. :(

list.js is using search box as default. Anyone know, how to use dropdown selection box for list.js?

I have used:

Javascript:

<script type="text/javascript">
$('#tpi').change(function () {
    var selection = this.value; //grab the value selected
var options = { valueNames: [ 'name', 'type', 'tpi' ]
};
var userList = new List('users', options);  
   });
</script>

HTML

      <select name="tpi" id="tpi">
        <option selected="selected" value="tpi">TPI</option>
        <option value="11">11</option>
        <option value="14">14</option>
        <option value="16">16</option>
        <option value="18">18</option>
        <option value="19">19</option>
      </select>

But not working. :(

• javascript
• jquery
• drop-down-menu
• dropdownbox
• listjs

1 Answer 1

Try something like this:

var options = {
    valueNames: ['name', 'type', 'tpi']
};
var userList = new List('users', options);

$('#tpi').change(function () {
    var selection = this.value; 

    // filter items in the list
    userList.filter(function (item) {
        return (item.values().tpi == selection);
    });

});

Make sure you place this script below the html stuff that needs to be filtered.