Would be nice to show a message if no results exist.

data-filter attribute does not filter on click like data-sort

Filtering via search works on the desktop browser, but not mobile safari. There are no console errors on the device when the list function is called, it just doesn't filter. Any thoughts?

First, thanks for an awesome plugin. :)

On my application based on other user's activity list elements are pushed out to all users(web sockets). The search doesn't work as the element is added after the dom is loaded and when I finish searching that element is removed from the DOM since it was added later.

I know I can use listjs to add elements but these elements are pushed from the server onto everyone on the page.

Any ideas on how I can get new elements pushed in to be added to the list so that listjs can search?

Say i have (pseudocode):

<li OPTGROUP>foo</li>
    <li OPTION>1</li>
    <li OPTION>2</li>
<li OPTGROUP>bar</li>
    <li OPTION>1</li>
<li OPTGROUP>cheese</li>
    <li OPTION>1</li>
    <li OPTION>2</li>

when I search for "2", I'd like to somehow persist (as in prevent them from being hidden) items with a certain class of "optgroup". How might I go about doing this without hacking the plugin?

Lists with mixed lower/upper case Swedish characters don't work properly.

Gist example including explanation of the problem: https://gist.github.com/1453745

The Paging Example at: http://listjs.com/examples/paging.html isn't working with the Chrome Console showing:
GET http://listjs.com/plugins/paging/list.paging.js 404 (Not Found)

-Neville

In my custom sorts, often I want to fall back on the alphanumeric sorter after my custom work, but its protected within a closure. Fixing it is as simple as turning sorter into this.sorter (and self.sorter where applicable)

Wouldn't it be perfect to make list.js accessible according to W3C's specifications http://www.w3.org/TR/wai-aria/
All the cool kids talk about it.

It's not really complicated, you have to:

• highlight relations between elements when the DOM tree doesn't do it naturally.
• tell the user when an element is changed dynamically.

// role="application" http://www.w3.org/TR/wai-aria/roles#application
<div id="lovely-things-list" role="application">

    // you must include a <label> to tell what the <input> is about
    <label for="search-list" >Search lovely things</label>

    // aria-required="false", we tell users they don't need to fill the input
    <input class="search" role="search" id="search-list" aria-describedby="searched-list" placeholder="Search lovely things" aria-required="false" />

    // the script behaves as a tab widget where each tab triggers a panel with a different content http://www.w3.org/TR/wai-aria/roles#tablist
    <ul class="sortby" role="tablist">
        <li class="sort btn" role="tab" id="sortby-name" data-sort="name" aria-describedby="sortedby-name">Sort by name</li>
        <li class="sort btn" role="tab" id="sortby-category" data-sort="category" aria-describedby="sortedby-category">Sort by category</li>
    </ul>

    <ul class="filterby"  role="tablist">
        <li class="btn" role="tab" id="filterby-none" aria-describedby="filteredby-none">Show all</li>
        <li class="btn" role="tab" id="filterby-games" aria-describedby="filteredby-games">Only show games</li>
        <li class="btn" role="tab" id="filterby-beverages" aria-describedby="filteredby-beverages">Only show beverages</li>
    </ul>

    // you'll note first the relation between aria-labelledby="#id_of_the_tab" and aria-describedby="#id_of_the_panel" http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby
    // aria-live="off" defines a live region wich will be updated. Once the update has occured, it must be set as "assertive" http://www.w3.org/TR/wai-aria/states_and_properties#aria-live
    // aria-atomic="true" http://www.w3.org/TR/wai-aria/states_and_properties#aria-atomic
    // aria-relevant="all" http://www.w3.org/TR/wai-aria/states_and_properties#aria-relevant
    <ul class="list" role="tabpanel" id="filteredby-none" aria-labelledby="filterby-none" aria-live="off" aria-atomic="true" aria-relevant="all">
        <li>
            <img src="images/monkeyisland.jpg" class="thumb" />
            <h4><span class="name">Monkey Island 2: LeChuck's Revenge</span> <span class="category">Game</span></h4>
            <p class="description">Monkey Island 2: LeChuck's Revenge is an adventure game developed and published by LucasArts in 1991. It was the second game of the Monkey Island series, following The Secret...</p>
        </li>
        <li>
            <img src="images/coffee.jpg" class="thumb" />
            <h4><span class="name">Good Coffee</span> <span class="category">Beverage</span></h4></h4>
            <p class="description">Coffee is a brewed beverage with a dark, slightly acidic flavor prepared from the roasted seeds of the coffee plant, colloquially called coffee beans.</p>
        </li>
        <li>
            <img src="images/fullthrottle.jpg" class="thumb" />
            <h4><span class="name">Full Throttle</span> <span class="category">Game</span></h4></h4>
            <p class="description">Full Throttle is a computer adventure game developed and published by LucasArts. It was designed by Tim Schafer, who would later go on to design the critically acclaimed titles Grim Fandango, Psychonauts and Brütal Legend.</p>
        </li>
        <li>
            <img src="images/brooklyn.jpg" class="thumb" />
            <h4><span class="name">Brooklyn Lager</span> <span class="category">Beverage</span></h4>
            <p class="description">Brooklyn Brewery was started in 1987 by former Associated Press correspondent Steve Hindy and former Chemical Bank lending officer Tom Potter.</p>
        </li>
    </ul>

</div>

I think that's it, I'll update if I come by anything more.
We can move the discussion on Twitter if you want any more help.

Will you consider this issue ?

Hello Jonny,

First of all, thanks for this awesome plugin!

My page uses in-line editing for the list, and the values in valueNames can change dynamically. However when the value changes, sorting the list still uses the old values and not the updated ones.
Is it possible to "re-index" the list again so that the sorting functions work even though the list values are updated? Or is there a better approach for this?

Thank you!

When I'm sorting various things the default alphanumeric sort is nice, but doesn't cover all my needs. Many times I have to create a custom sort function, and its kind of annoying to only be able to sort on what information you are presenting in that tag.

As an example, the alphanumeric sort can't handle $120,200.00 (dollar signs and commas). So I have to create a custom function, but in that function I have to manually strip out the $ and , before I have something I can work with sort wise.

there is return; missing in add function.
if (callback) {
addAsync(values, callback);

    }

addAsync calls add within itself.
So, now after addAsync add continues and adds an empty element to the list.

This is more like a feature request.

mylistjspage.html?q=search&filter=xyz

So we can share links (email) to the 'state' of listjs on that page.

This is greatly popularized by caniuse.com (http://caniuse.com/#feat=script-async)

Dotdreaming edited the List wiki asking for Fuzzy Search to be added.
Fuzzy search is a feature which allows users to make mistakes when typing their search query.
The application will still find close matches. You can tweak the threshold by adding fuzzyThreshold to your list options.

I used code provided by the Diff Match Patch project at http://code.google.com/p/google-diff-match-patch/

You can see a live demo of this commit at bijtel.com/Sociale-Kaart.
However, that app sorts on Organisation name & keywords. Keywords are only viewable when you click on a record.
(don't get confused ^^)

Add a list item that starts with a unicode character, and then sort by that field name.

In my case, this results in the items prior to this one sorting successfully, but all subsequent items failing to sort.

I am creating a list that may or may not have all items specified in valueNames. A full list item is like so

  <li class="message" id="post-list-item">
      <h2 class="post-title"></h2>
      <ul class="attachments">
        <li><a href="" class="post-attachment"></a></li>
      </ul>
      <p class="post-summary"></p>
  </li>

var options = {
              valueNames: [ 'post-title', 'post-summary', 'post-attachment' ],
              searchClass: "search-query",
              item: "post-list-item"
            };

            var postList = new List('mystream', options);

However, if post-attachment is missing then I get an error cannot read innerHTML on 534.

Is there something that I should be doing to manage lists that have variable items?

Is this is a possible use-case?

I'd like to take a list of blog post titles with dates and authors and tags and turn it into several formats, with tabs.

First an archived blog in a tree-like directory structure (with arrows for dropdown) with a count. For example:

2010 (23)
v 2011 (10)
January (1)
February (3)
March (2)
v October (4)
Post 1
Post 2
Post 3
Post 4

Second, arranged by author, with count. E.g.
> John Doe (5)
> Melissa Smith (5)

Third, arranged by tag, with count. E.g.
> cooking (2)
> crafts (4)
> sculpture (6)

There are variables declared twice, undeclared variables and a typo in a variable name.

See here: http://www.jshint.com/reports/47004

Some strange behaviour. Is search field a must for this plugin? I don't need a search field right now, and may not require it in future.

this code fails:

return function(searchClass,node,single) {
if (single) {
return node.getElementsByClassName(searchClass)[0];
} else {
return node.getElementsByClassName(searchClass);
}
};

Here's an example:

==== start html ====

<!doctype html>

First of all, I love what ListJS has done.

However, during staging tests I discovered a few areas about ListJS that can be improved.

1. Reinventing browser compatibility and extra bloat. ListJS can be up to 1/4 lighter if using widely adapted jquery or other js html libs. Right now ListJS is rewriting some dom selectors, event triggers, and just plain using direct javascript syntax and random browser compat code added in. With something like jquery, everything would be cleaner with automatic browser compatibility.

2. ListJS should not assume every item attribute specified should exist. This issue has been brought up already but it is an important one since in real life, the backend is only outputting as little data as possible. What I did is modify the get itemvalue code to set it to single space string if it doesn't exist.

was trying to submit an updated minified version with a bugfix and I got this after running ant in the root dir:

list (master)$ ant
Buildfile: build.xml does not exist!
Build failed

http://news.ycombinator.com/item?id=3137567

Allow passing an element to constructor instead of just an ID.

Hi, I would like to make the paging structure similiar to Twitter Bootstrap, is it possible?

<li class="active">
    <div class="page"><a href="#">1</a></div>
</li>
<li class="active">
    <div class="page"><a href="#">2</a></div>
</li>
<li class="active">
    <div class="page"><a href="#">3</a></div>
</li>

It will be great, if it can do that.

This is more of a support request:

How do I get a handle on the returned items before I show them? I would like to animate or fade them in etc. The api is not very clear to me :(

Here is my call:

/* 
        * Filter Case studies
        */

        var options = {
            valueNames: ['category'],                       
        };

        var featureList = new List('case-studies-list', options);

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

Everything is in the title.

The rel attribute can only take those values: alternate, stylesheet, start, next, prev, contents, index, glossary, copyright, chapter, section, subsection, appendix, help, bookmark, nofollow, license, tag, friend.

Fortunately, HTML5 come to the rescue and provide THE attribute to store raw data for JS uses.

So according to the two following articles your example code becomes:

http://html5doctor.com/html5-custom-data-attributes/
http://ejohn.org/blog/html-5-data-attributes/

<div id="example-list">
    <input class="search" />
    <span class="sort" data-list="feature">Sort features</span>
    <ul class="list">                                
       <li>
           <span class="feature">Search</span>
           <small class="description">Search through all items.</small>
       </li>                            
       <li>
           <span class="feature">Sort</span>
           <small class="description">Sort lists by value that 
               you choose.</small>
       </li>                            
       <li>
           <span class="feature">Filter</span>
           <small class="description">
                Write your own filter functions.
            </small>
       </li>                            
       <li>
           <span class="feature">Add</span>
           <small class="description">Add items on the fly.</small>
       </li>                            
       <li>
           <span class="feature">Get</span>
           <small class="description">Get item based on value.</small>
       </li>                            
       <li>
           <span class="feature">Update</span>
           <small class="description">Update items as you go.</small>
       </li>                            
       <li>
           <span class="feature">Remove</span>
           <small class="description">
                Remove items whenever you feel like.
            </small>
       </li>
    </ul>
</div>

steps to reproduce the bug:

1. open http://listjs.com/examples.html
2. open javascript:undefined = 42; void 0;
3. click on a button
4. a JavaScript error is displayed in the console: "Uncaught RangeError: Maximum call stack size exceeded" (on chrome)

Great job!

I have an issue with adding strings containing lower-than or greater-than character.

    list = new List('main',listOptions);
    list.add( { "Pdatetime":"2011-11-22 13:21:31","Phost":"ramoth","Pfacility":"daemon","Plevel":"debug","Pprogram":"dnsmasq","Ppid":"2122","Pmessage":"reply news.google.com is <CNAME>" } );

throw the following error:

An invalid or illegal string was specified
q.innerHTML=o[n]}}}};

Call stack is:

• set
• values
• x
• k
• index
• o
• e

Pagination is a must for "JavaScript that makes your plain HTML lists super flexible, searchable, sortable and filterable."

set valueNames options and try to create a new list.
When get method is called it crashes on attempt to get nodes, because nodes = self.list.childNodes == undefined.

I'm a bit confused in one regard: what is the purpose of having the ability to add items to the list.js list? I'm a bit confused on this point. I know this is not an issue, so you can close it, but is there somewhere in the docs that a method for handling this is detailed?

Ok I have set up a list with just a search box at the top. This works fine in Chrome, in Safari it returns no results no matter what I type and I see the error

TypeError: 'undefined' is not a function (evaluating 'n.addEventListener(m,k,false)')

In IE it filters the list correctly but the sidebar of my site disappears

Hello, first of all i want to thank you for your script.

I have some sort of problem with it, and i hope you can help me.

I created list with more than 10 classes and 1000+ objects with paging, so i can easily navigate through objects. But sadly, paging stop working after second class of objects with amount more than objects on page.

Example: 100 objects within 4 'class'. 25 objects each. 10 objects on page. After filtering for 'class' we have 3 pages with first 25 elements and working paging. But after filtering for second class we have 3 pages with 25 next objects but navigating on pages 2-3 doesn't work. Same thing happening for all other classes.

100 objects in a row, first 25 objects - first class, second 25 objects - second class etc.

I am terrible sorry for my language, and i hope that you will help me

Support for nested list will be appreciated

<ul class="list">
 <li>
     <span  class="name">Business Competence</span>
     <ul>
      <li>Company and business environment</li>
      <li>Products and services</li>
     </ul>
 </li>
 <li>
  <span  class="name">Professional Competence</span>
  <ul>
    <li><span  class="name">Accounting</span> / Finances</li>
  </ul>
 </li>
</ul>

what about zen coding when there is no list item at all?

var options = {
  item: "li>h3.name+p.city"
}

I'm using List.js to generate the rows of a HTML table from an array of JSON objects. Each object has 7 (or so) keys/values, with some of those values equal null. Each key of a given object matches a column in the HTML table.
The issue I ran into is when using the sort function on the HTML table on a column with null values.
The sort function fails on line 252 because b is null. Typeof b in my case is "Object", so it never goes through the test if (b === undefined) on line 244.
Maybe you should consider to replace this test with "if (!b)" which will match both cases (b === undefined or b == null).

When adding new "item category" to filter (total 3 categories), like this:

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

and adding new button like this:

<li class="btn" id="filter-archiver">Some new Category</li>

Second button stops to filter items completely, first button filters if you click on it in first order. but if you click on third button first, and then click first button, it shows incorrect results (merging results from first and third category)

Firstly, thanks for your library! It is very, very good!

I have only seen examples where you can replace a html tag that has a class defined with a tag that contains the value from json model:

eg

template:
<span class="myvalue>

data:
{"myvalue":999}

result:
<span class="myvalue>999

Is there a way to create the following result:
<span class="myvalue>the value was 999

using a template like
<span class="myvalue>the value was {{myvalue}}

I am asking as I want to contruct hyperlinks but cannot see how to without adding the hyperlink text to the json object which is not ideal.

CSS classes can be applied to the sort buttons, and also the pagination buttons when they come. This will make List.js a complete solution for all listing/sorting/pagination/filtering needs.

Simple and Elegant. I wish I could contribute some code though :(

When attempting to create a List with no initial <li> elements in the DOM, List.js fails at this line.

Here is a small example (using jQuery):

$(function () {
    var options = {valueNames: ["name"]};
    var list = new List("list", options);

    $("#add-item").click(function () {
      list.add({name:"John"});
    });
});

Adding [] for the values argument of List's constructor doesn't help.

Reproduced on:
Chrome 14.0.835.202
Safari 5.1.1 (7534.51.22)

The templater should set the id attribute if the id is present on the source data. Currently the templater will add an 'id' attribute but it does not set a value.

Try typing, for example, ( or ) or / in the search field – throws an error.

https://github.com/javve/list/blob/master/src/list.js#L419

You can speed it up using native DOM methods, rather than innerHTML. Presently you're demanding the DOM be interpreted as a string and causing the browser to do a lot of re-rendering work, innerHTML is bad for performance, but will assassinate performance when inside a loop.

I'd suggest using text nodes or DOM fragments:

https://developer.mozilla.org/En/DOM/DocumentFragment

You have the opportunity to improve speed where you get the values as well: https://github.com/javve/list/blob/master/src/list.js#L410

Not sure what other info I can give but I'm using the current version of List as of this afternoon, here is my JS:

var setupList = function(listId) {
  var options = {item: '#emptyReview',
                 valueNames: ['status']};
  var featureList = new List(listId, options);

  $('#toggleSuspended').click(function() {
    var doFilter = $(this).html() == 'Show Suspended';
    if(doFilter) {
      $('#toggleSuspended').html('Hide Suspended');
      featureList.filter(function(values) {
        if (values.category == "Suspended") {
          return false;
        } else {
          return true;
        }
      });
    } else {
      $('#toggleSuspended').html('Show Suspended');
      featureList.filter();
      return false;
    }
  });
}

$(function() {
  setupList('#someId');
}

maxVisibleItemsCount doesn't work correctly when a filter is set

• Sometimes no items are shown

First of all..nice job it works fine, but...

I've created a piece code where I create the

I am adding items to my list using add() and have a console.log before my add call and within my set function.

When calling add once the set gets called twice.

Is this expected behaviour?

I have a site using list.js where search is not working with IE7. Everything else is working (filtering, sorting).
Examples on http://listjs.com/examples/standard.html are working.

I don't know how to debug under IE.

list.min.js updated to last version.

List created using:

var options = { item: 'pnt-item', listClass: 'pnt-list', searchClass: 'pnt-search', sortClass: 'pnt-sort', page: '1000' };
list = new List( 'pnt-main', options, jsondata.data );

pnt-item is a template (style="display:none;" on father) on tr containing th and td.

list.search('foo');

produce a correct list under Firefox but an empty list under IE7

Can we have a function to clean all the list content?

For the moment I'm doing the following:

    base = document.getElementById('main_body');
    while (base.lastChild != null) {
        base.removeChild(base.lastChild);
    }
    list.items = [];

When I perform a search in IE the sidebar of my site disappears, seem to be fine in all other browsers.

Here's the source for the page

http://pastebin.com/G5Dxe4df

My list starts at line 75