Tuesday, January 15, 2013

Auto Complete with ajax


  $("#existingCustomersTab").find("#nameText").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "CallRegister2.aspx/fetchCustomerNames",
                    data: "{reqNames: '" + request.term + "',lastNameChecked: '" + $("#existingCustomersTab").find('input[id=lastNameRb]:radio:checked').val() + "'}",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    dataFilter: function (data) { return data; },
                    success: function (data) {
                        response($.map(data.d, function (item) {
                            return {
                                label: item.firstName + " " + item.lastName,
                                value: item.firstName + " " + item.lastName,
                                id: item.id,
                                first: item.firstName,
                                last: item.lastName
                            }
                        }))
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(textStatus);
                    }
                });
            },
            select: function (event, ui) {
                $.ajax({
                    url: "CallRegister2.aspx/fetchCustomerDetails",
                    data: "{txtId: '" + ui.item.id + "'}",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    dataFilter: function (data) { return data; },
                    success: function (data) {
                        $("#existingCustomersTab").find("#firstHiddenText").val(ui.item.first);
                        $("#existingCustomersTab").find("#lastHiddenText").val(ui.item.last);
                        $("#existingCustomersTab").find("#emailText").val(data.d[0].email);
                        $("#existingCustomersTab").find("#customerIDText").val(ui.item.id);
                        $("#existingCustomersTab").find("#phoneText").val(data.d[0].telephone);
                        $("#existingCustomersTab").find("#accountIDText").val(data.d[0].serviceID);
                        $("#existingCustomersTab").find("#customerDetailsDiv").tabs("option", "selected", 0);
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(textStatus);
                    }
                });

            },
            minLength: 2,
            delay: 10
        });

No comments:

Post a Comment