how to autofilter a sharpeoint lists using SPServices

Question

I am not sure if SPServices is the right framework to do the following.

I have an application page which by default will show a sharepoint list which has 16,000 items. By default It shows the first 30 list items based on name.

I want to put a textbox, that when the user starts typing then the grid is automatically reduced without pressing a button for a postback.

Lets say the sharepoint list has:

client code, client name, ClientOwner
0001, google, john smith
0002, dell, maria smith
0003, microsoft, bill gates

so, once I type sm, it should show the first 2 rows

If this is possible with SPService, please let me know, any example of could this be achieved would be helpful, I am not asking a full code, but at least a starting point.

Answer 1

Here's some generalized code taken from a library I just wrote. Basically I store a ton of links in a list, and the user can search the links by typing in partial names.

var input = "example string"

var comparisons = [];
var splitInput = this.input.split(" ");

for (var comparison in splitInput) {
    if (splitInput[comparison].length > 0) {
        comparisons.push(splitInput[comparison]);
    }
}

if (comparisons.length == 0) {
    return;
}

var comparisonString = "";
var levels = 0;

for (i = 0; i < comparisons.length; i++) {
    if (comparisons.length > 1 && i < comparisons.length - 1) {
        comparisonString += "<And>";
        levels++;
    }

    comparisonString += "\
        <Contains>\
            <FieldRef Name='Title' />\
            <Value Type='Text'>" + comparisons[i] + "</Value>\
        </Contains>";
}

for (i = 0; i < levels; i++) {
    comparisonString += "</And>";
}

var internalLinks = [];
var externalLinks = [];

$().SPServices({
    operation: "GetListItems",
    webURL: "/path/to/site",
    listName: "exampleList",
    async: false,
    CAMLViewFields: '\
        <ViewFields>\
            <FieldRef Name="Title" />\
            <FieldRef Name="Site_x0020_Address" />\
        </ViewFields>',
    CAMLQuery: '\
        <Query>\
            <Where>' + comparisonString + '</Where>\
            <OrderBy>\
                <FieldRef Name="Title" Ascending="True" />\
            </OrderBy>\
        </Query>',
    CAMLRowLimit: 15,
    completefunc: function (jqXHR, Status) {
        $(jqXHR.responseXML).SPFilterNode("z:row").each(function (i, row) {
            var _temp = $(row).attr("ows_Site_x0020_Address").split(", ");

            if (_temp.length > 1 && _temp[0].length > 0 && _temp[1].length > 0) {
                if (_temp[0].search("/mysite\.com/") < 0) {
                    externalLinks.push({
                        link: "<a href='" + _temp[0] + "'>" + _temp[1] + "</a>"
                    });
                } else {
                    internalLinks.push({
                        link: "<a href='" + _temp[0] + "'>" + _temp[1] + "</a>"
                    });
                }
            }
        });
    }
});