home articles tags browse code

Javascript filter search through dataset

Prerequisites: Ajax, XML Parsing, Event Processing

There are two common methods of searching through large amounts of data, the 'search' and the 'filter'. Generally a search on the data means you enter in a keyword and then push search. If you can't find what you want you generally reword your query and try again.

The ability to filter through your data instead of search is a way for users to access data, because it allows users to see the results of their search as they are entering their query. The itunes library search is a great example for this.

First the demo:
1. push [load data] button
2. start typing a word in the input box (ex: developer, application, programming)
3. notice how as you type, books that dont include what you've typed are filtered out

Search:

This is essential broken into 3 pieces, preloading the data, parsing the data and filtering through it.

function get_booklist(){

    AJAX.execute('amazon.xml', ajax_response);

}

1. When you push 'load data', it calls get_booklist() which fetches an xml file of books using ajax.

function ajax_response(ajaxobj)

{

    var xml = ajaxobj.responseXML;

    var doc = (xml.firstChild.nextSibling)? xml.firstChild.nextSibling : xml.firstChild;

    var booksxml = getChildrenByTagName(doc, 'book');

    if (booksxml!= null && booksxml.length>0)

    {

        g_booklist=new Array();

        for(var i=0; i<booksxml.length; i++)

        {

            t = getTextByName(booksxml[i],'title');

            a = getTextByName(booksxml[i],'author');

            u = getTextByName(booksxml[i],'url');

            g_booklist.push( createBook(a,t,u) );

        }

        g_booklist.sort(sortByTitle);

        g_searchstr='';

        for (var i=0; i<g_booklist.length; i++)

            g_searchstr+= ' '+g_booklist[i].author+'| '+g_booklist[i].title+'[|['+i+']|]';

        g_searchstr = g_searchstr.toLowerCase();

        showlist(g_booklist);

    }

}

2. The callback function of the ajax call parses the xml and creates an array of books. However we will want to search it in the future, so we add the book authors and titles to a big string (searchstr). Next to each title, notice we also include the index of each title next to it.

function searchkeyup(e)

{

    e   =fixevent(e);

    targ=findtarget(e);

    var searchtext = ' '+targ.value.toLowerCase();

    if (searchtext.length<=2)

    {

        if (g_lastcount!= g_booklist.length)

        {

            showlist(g_booklist);

        }

        return;

    }

    var booklist=new Array();

    var results =g_searchstr.split(searchtext);

    for(var i=1; i<results.length; i++)

    {

        var idx1 = results[i].indexOf('[|[');

        var idx2 = results[i].indexOf(']|]');

        if (idx1!=-1 && idx2!=-1 )

        {

           var idx = results[i].substring(idx1+3, idx2);

           if (isInt(idx))

           {

               booklist.push( g_booklist[idx] );

           }

        }

    }

    showlist(booklist);

}

3. Next as you enter text in the input box we do the filter search in javascript. In order to do this we use the javascript function split. Split is a function you would normally use to convert a comma separated list like var abc="a,b,c"; into an array with abc.split(","). When we call split on the g_searchstr, we are essentially creating an array of n+1 elements where n is the number of times the searchtext appears in g_searchstr. At each search result, we fetch the corresponding index into the array of books, to get the author, title and other data from array, then display and format it.

Because the array of books is preloaded, javascript can perform the "filter search" on the dataset very quickly, even when handling thousands of records.

datasetfilter.zip - Download Source

Tags: ajax, xml, javascript

Bookmark this...