List.js - Search all fields (4) in list with 1000 items (v2)

Revision 2 of this benchmark created on December 3, 2011

Description

Preparation HTML

<div class="example c1">
  <h2>
    Contact list
  </h2>
  <div id="contacts" style="height:200px; overflow:scroll;">
    <table>
      <thead>
        <tr>
          <th class="sort" rel="name">
            Name
          </th>
          <th class="sort" rel="age">
            Age
          </th>
          <th class="sort" rel="city">
            City
          </th>
          <th colspan="2">
            <input type="text" class="search" placeholder="Search contact" />
          </th>
        </tr>
      </thead>
    </table>
    <div class="huge">
      <table>
        <tbody class="list">
          <tr>
            <td class="id" style="display:none;">
            </td>
            <td class="name">
            </td>
            <td class="age">
            </td>
            <td class="city">
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
<script src="//listjs.com/js/list.js">
</script>

Setup

function randomString(length) {
      var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz'.split('');
    
      if (!length) {
        length = Math.floor(Math.random() * chars.length);
      }
    
      var str = '';
      for (var i = 0; i < length; i++) {
        str += chars[Math.floor(Math.random() * chars.length)];
      }
      return str;
    }
    
    
    var contacts = [];
    // Init list
    for (var i = 0; i < 1000; i++) {
      contacts.push({
        id: Math.floor(Math.random() * 1100000),
        name: randomString(13),
        age: Math.floor(Math.random() * 110),
        city: randomString(13)
      });
    }
    // Define value names
    var templates = {
      valueNames: ['id', 'name', 'age', 'city']
    };
    
    var contactList = new List('contacts', templates, contacts);

Test runner

contactList.search('afd');

contactList.search('342');

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

• Revision 1: published by Javve on October 22, 2011
• Revision 2: published on December 3, 2011