Really simple examples

You can use List.js on either existing HTML or create new with super simple templating.

Example 1: Using existing list

HTML

<div id="hacker-list">
  <ul class="list">
    <li>
       <h3 class="name">Jonny</h3>
       <p class="city">Stockholm</p>
    </li>
    <li>
      <h3 class="name">Jonas</h3>
      <p class="city">Berlin</p>
    </li>
  </ul>
</div>

JavaScript

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

var hackerList = new List('hacker-list', options);

Example 2: Create list on initialization: Version 1

HTML

<div id="hacker-list">
    <ul class="list"></ul>
</div>

JavaScript

var options = {
  valueNames: [ 'name', 'city' ],
  item: '<li><h3 class="name"></h3><p class="city"></p></li>'
};

var values = [
  { name: 'Jonny', city:'Stockholm' }
  , { name: 'Jonas', city:'Berlin' }
];

var hackerList = new List('hacker-list', options, values);

Example 3: Create list on initialization: Version 2

HTML

<div id="hacker-list">
  <ul class="list"></ul>
</div>

<div style="display:none;">
  <!-- A template element is needed when list is empty, TODO: needs a better solution -->
  <li id="hacker-item">
   <h3 class="name"></h3>
   <p class="city"></p>
  </li>
</div>

JavaScript

var options = {
    item: 'hacker-item'
};

var values = [
    { name: 'Jonny', city:'Stockholm' }
    , { name: 'Jonas', city:'Berlin' }
];

var hackerList = new List('hacker-list', options, values);

Example 4: Index existing list and then add

HTML

<div id="hacker-list">
  <ul class="list">
   <li>
     <h3 class="name">Jonny</h3>
     <p class="city">Stockholm</p>
   </li>
  </ul>
</div>

JavaScript

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

var hackerList = new List('hacker-list', options);

hackerList.add( { name: 'Jonas', city:'Berlin' } );

Example 5: Add automagic search and sort inputs and buttons

HTML

<div id="hacker-list">

  <input class="search" />
  <span class="sort" data-sort="name">Sort by name</span>
  <span class="sort" data-sort="city">Sort by city</span>

  <ul class="list">
   <li>
     <h3 class="name">Jonny</h3>
     <p class="city">Stockholm</p>
   </li>
   <li>
     <h3 class="name">Jonas</h3>
     <p class="city">Berlin</p>
   </li>
  </ul>
</div>

JavaScript (nothing special)

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

var hackerList = new List('hacker-list', options);

Read more here

Example 6: Using data attributes and other custom attributes (introduced in v1.2.0)

HTML

<div id="hacker-list">
  <ul class="list">
   <li data-id="1">
     <a href="http://javve.com" class="link name">Jonny</a>
     <p class="born timestamp" data-timestamp="1234">1986</p>
     <img class="image" src="javve.jpg" />
   </li>
  </ul>
</div>

JavaScript

var options = {
  valueNames: [
    'name',
    'born',
    { data: ['id'] },
    { name: 'timestamp', attr: 'data-timestamp' },
    { name: 'link', attr: 'href' },
    { name: 'image', attr: 'src' }
  ]
};

var hackerList = new List('hacker-list', options);

hackerList.add({
  name: 'Jonas',
  born: '1985',
  id: 2,
  timestamp: '1337',
  link: 'http://arnklint.com'
  image: 'jonas.gif'
});