Click here to Skip to main content
15,887,027 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
hi friends

I am using auto complete extender using jquery through webservice. I have two textboxes.for both I am using autocomplete extender.
Ex:
Material group    Material Name
MaterialGroup1    MaterialName1
                  MaterialName2
                  MaterialName3
MaterialGroup2    MaterialName4
                  MaterialName5

Here my question is when I select materialGroup1 in one textbox through autocomplete extender the corresponding materialnames(from MaterialName1 to MaterialName3) should be populated in auto completeextender in another textbox.

how to achieve this using jquery.

What I have tried:

here my jquery function is
JavaScript
function SearchText() {

        $(".autosuggest").autocomplete({
        
        source: function (request, response) {            
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "MaterialRequestForm.aspx/GetAutoCompleteData",

                data: "{'MaterialName':'" + this.term + "'}",
                dataType: "json",

                success: function (data) {
                    if (data.d.length > 0) {
                        response($.map(data.d, function (item) {
                            return {
                                label: item.split('/')[0],
                                val: item.split('/')[1],
                               
                            }
                        }));
                    }
                    else {
                        response([{ label: 'No Records Found', val: -1 }]);
                    }
                },
                error: function (result) {
                    alert("Error");
                }
            });
        },
        select: function (event, ui) {
            //if (ui.item.val == -1) {
            //    return false;
            //}
            var disid  = $(this).attr("data-id");
            $(".id-group").find(".col-md-12").each(function(){
                if (disid == $(this).find("input[type=text]").attr("data-id")) {
                    $(this).find("input[type=text]").val(ui.item.val);
                }
            });
        }
    });

Here I am assigning material Id to textbox on selection of Material name.
how to populate the data based on selected value in auto complete extnder.
Posted
Updated 26-Sep-16 0:27am
v3

1 solution

Create onselect event handler on the group dropdown. In the event handler call the web service that will populate the material one.
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900