Filtering the displayed data on Contact Name

Doing searches on large datasets can be time consuming. The recommended amount of data for a given device platform is dependent on the CPU, memory access speed, OS read/write efficiency, and available memory. In general, the newer the device, the more data that can be supported while continuing to supply an acceptable user experience.

If a dataset is really large, it can be a major convenience to the user to allow the display to be filtered to show only those entries that match what the user enters. The List Viewer does not directly support filtering of the dataset it is working with, so that must be handled in the page code.

Immediately after the body tag, the master page defines a form that allows the user to enter text that will be used to filter the displayed data on Contact Name. For example, if the user enters smith, the display will be restricted to Contact Names beginning with smith: Smith, Smithe, Smithson, Smithy, etc.

The filter input form at the top of the page calls a setFilter() function when the user taps the Search button:

<form> 
<table width="220" cellspacing="0" cellpadding="0" border="0"> 
<tr> 
    <td align="right"> 
        <input style = "background-color: #ffffcc; font-family: verdana; 
        font-size: 9px; padding-top: 2px; padding-bottom:1px;" 
        type="text" name="filter" id="filterInput" value="" size="8"> 
    <input type="button" value="Search" onclick="setFilter()"> 
    </td> 
</tr> 
</table> 
</form>

After defining its variables, the setFilter() function stores the List Viewer object (named accountTable in this example) in a variable named list :

list = document.getElementById("accountTable");

...then stores the text entered by the user (given the id of filterInput in the form) in a variable named filterInput:

filterInput = document.getElementById("filterInput");

If the user has not entered any text to filter on, the filter is set to null:

if ((null == filterInput.value) || (0 ==filterInput.value.length)) { 
    search = accountDb.setFilter(null); 
}

Otherwise the setFilter() function then creates the search string:

filter = "ContactName ~ " + filterInput.value;

...moves the pointer for the Customers datastore (accountDb) to the beginning of the file:

accountDb.moveTo(0);

...performs a search:

search = accountDb.createSearch(filter);

...and sets the filter to the search results:

accountDb.setFilter(search);

Finally, the setFilter() function has the List Viewer refresh its dataset to reflect the filtering:

list.refreshDbSet();

...and has the List Viewer redraw the display:

list.refreshScreen();