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

Benchmark created by Javve on October 22, 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