Using List.js is pretty much plug and play, but you can change some options if you feel like it.

new List(id/element, options, values);
  • id or element *required Id the element in which the list area should be initialized. OR the actual element itself.
  • options Some of the option parameters are required at some times

    • valueNames Array, default: null. *required
      If the list contains items on initialization, then this array has to contain the value names (class names) for the different values of each list item.

      <ul class="list">
              <span class="name">Jonny</span>
              <span class="city">Sundsvall</span>
      var valueNames = ['name', 'city'];
      <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" />
      var valueNames =  [
        { data: ['id'] },
        { name: 'timestamp', attr: 'data-timestamp' },
        { name: 'link', attr: 'href' },
        { name: 'image', attr: 'src' }
    • item String, default: undefined
      ID to item template element or a string of HTML.

      var options = {
          item: "<li><span class='name'></span><span class='city'></span></li>"
      // or
      var options = {
          item: 'cool-item-id'
    • listClass String, default: "list"
      What is the class of the list-container?

    • searchClass String, default: "search"
      What is the class of the search field?

    • sortClass String, default: "sort"
      What is the class of the sort buttons?

    • indexAsync Boolean, default: false
      If there are already items in the list to which the List.js-script is added, then should the indexing be done in a asynchronous way? Good for large lists (> 500 items).

    • page Int, default: 200
      Defines how many items that should be visible at the same time. This affects performance.

    • i Int, default: 1
      Which item should be shown as the first one.

    • plugins Array, default: undefined
      Read more about plugins here

  • values Array of objects) (*optional Values to add to the list on initialization.

Next topic: List API ›