How-to-assign-selected-value-from-auto-complete-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.

here my jquery function is

 

 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 extender.