How to implement auto-complete for multiple textboxes based on a selected value from the database

I am trying to implement an auto-complete feature for multiple textboxes based on the value selected from a populated textbox in a database.
The setup consists of four textboxes:
- First name
- Last name
- Address
- Phone number
When a user types in the "First name" textbox, an autocomplete function suggests names from the database in a dropdown. Upon selecting a name, the corresponding Last name, Address, and Phone number textboxes should auto-fill based on the selected first name.
I have successfully populated the first name textbox but am struggling with the auto-completion for the other fields (Last name, Address, Phone number).
How can this be achieved?
Here is the current code for populating the first name textbox:
My HTML
<div class="input-group">
<asp:TextBox ID="FirstName" runat="server" CssClass="form-control" BorderStyle="Solid" BorderWidth="1" />
<cc1:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" ServiceMethod="BioData" ServiceMethServicePath="BioPage.aspx" MinimumPrefixLength="1" CompletionInterval="100" EnableCaching="false" CompletionSetCount="1" TargetControlID="FirstName" FirstRowSelected="false" OnClientItemSelected="OnClientItemSelected" CompletionListCssClass="completionList" CompletionListHighlightedItemCssClass="itemHighlighted" CompletionListItemCssClass="listItem">
</cc1:AutoCompleteExtender>
<script type="text/javascript">
function OnClientItemSelected(sender, args) {
var title = args.get_text().replace(".", "");
var Id = args.get_value();
window.location.href = "/IdentificaionData/" + Id + "/" + encodeURI(title);
}
</script>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label runat="server" id="Label19">Last Name</label>
<div class="input-group">
<asp:TextBox ID="Lastname" runat="server" CssClass="form-control" Style="text-transform: capitalize;" BorderStyle="Solid" BorderWidth="1" OnTextChanged="SearchText_TextChanged"></asp:TextBox>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-7">
<div class="form-group">
<label runat="server" id="Label20">Address</label>
<div class="input-group">
<asp:TextBox ID="Address" runat="server" CssClass="form-control" BorderStyle="Solid" BorderWidth="1" OnTextChanged="SearchText_TextChanged"></asp:TextBox>
</div>
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label runat="server" id="Label21">Phone Number</label>
<div class="input-group">
<asp:TextBox ID="Phone" runat="server" CssClass="form-control" BorderStyle="Solid" OnTextChanged="SearchText_TextChanged" BorderWidth="1" onkeypress="return isNumber(event);" />
</div>
</div>
</div>
</div>
I used a web method to populate from the database
C#
using System.Web.Services;
public static List<string> BioData(string prefixText, int count)
{
using (SqlConnection con = new SqlConnection())
{
con.ConnectionString = ConfigurationManager.ConnectionStrings["ConString"].ConnectionString;
using (SqlCommand cmd = new SqlCommand())
{
cmd.CommandText = "SELECT [Id], [Tname] FROM [TableData] where [Tname] LIKE @SearchText + '%'";
cmd.Parameters.AddWithValue("@SearchText", prefixText);
cmd.Connection = con;
con.Open();
List<string> articles = new List<string>();
using (SqlDataReader sdr = cmd.ExecuteReader())
{
while (sdr.Read())
{
articles.Add(AjaxControlToolkit.AutoCompleteExtender.CreateAutoCompleteItem(sdr["Tname"].ToString(),
sdr["Id"].ToString()));
}
}
con.Close();
return articles;
}
}
}