Question

I am calling a web service (using SPServices) to get all of my items into an array, then using that array in my autocomplete call. It works great, however I have a few questions/issues

1. How can I deny the user from selecting values which are not in the pick list? I think a combo box does this, however I don’t want to load up the entire list onto the page… which leads to #2

2. I am using a picker list which will have a few thousand items in it (currently a few hundred), from what I’m gathering with autocomplete it loads up all of the choice values into an array and then uses that to pick from. is that correct? Is there a better way around this so I can call a web service with my partially entered words, and only array the results, not all of the items? Will this be a unique solution outside of autocomplete or combobox?

Thanks,
David

Answer 1

So here’s what I did…

On key up, call my web service with the new term, and then put the returned results into the autocomplete. Also the results are then cached.

I am also checking when the user continues that the value specified is contained in the array, ensuring they didn’t mess with the value.

function setVendorLookup() {
    var term = $(this).val().toLowerCase();
    if (term.length > 2) {
        if (vendors.join(" ").toLowerCase().indexOf(term) == -1) { //some caching
            vendors = [];
            $().SPServices({
                operation: "GetListItems",
                listName: "Yellow Pages",
                async: false,
                CAMLViewFields: "<ViewFields><FieldRef Name='VENDOR_ID'/><FieldRef Name='NAME1'/><FieldRef Name='CITY'/><FieldRef Name='STATE'/></ViewFields>",
                CAMLQuery: "<Query><Where><Or><Contains><FieldRef Name='VENDOR_ID' /><Value Type='Text'>" + term + "</Value></Contains>" +
                    "<Contains><FieldRef Name='NAME1' /><Value Type='Text'>" + term + "</Value></Contains></Or></Where></Query>",
                completefunc: function (xData, Status) {
                    $(xData.responseXML).find("[nodeName='z:row']").each(function () {
                        vendors.push($(this).attr("ows_VENDOR_ID") + " - " + $(this).attr("ows_NAME1") + ", " + $(this).attr("ows_CITY") + ", " + $(this).attr("ows_STATE"));
                    });
                }
            }); //SPServices
        }
        $(".vendor").autocomplete({
            source: vendors,
            minLength: 3
        });
    } else
        vendors = [];

}

function validate()
{
        if (jQuery.inArray($(".vendor").val(), vendors) == -1) {
            myAlert("Validation Error", "Please select a valid vendor");
            return false;
        }
}