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

Donald Symmons 3,066 Reputation points
2025-04-11T07:17:38.8266667+00:00

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:

  1. First name
  2. Last name
  3. Address
  4. 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;
        }
    }
}
Developer technologies | C#
0 comments No comments
{count} votes

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.