locked
Autocomplete extender RRS feed

  • Question

  • User-651692633 posted

    Hi

    I am using Ajax extender in a text box fro getting for autocomplete functionality. I would like to fill the rest of the elements on my web page based on the selected value. What is the best method to do so. I was thinking of using textbox textchanged event .. Is there any thing else.. Please advise

    Thursday, September 3, 2015 2:02 PM

Answers

  • User1724605321 posted

    Hi anupamabr,

    I would like to fill the rest of the elements on my web page based on the selected value. What is the best method to do so. I was thinking of using textbox textchanged event .. Is there any thing else.. Please advise

    You could also use AutoComplete extender which is an ASP.NET AJAX extender that can be attached to any TextBox control, and will associate that control with a popup panel to display words that begin with the prefix typed into the textbox. Code below is for your reference:

    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript" src="Scripts/jquery-2.1.4.js"></script>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server" />
            <div>
                <asp:TextBox ID="txtInfo" runat="server"></asp:TextBox>
                <cc1:AutoCompleteExtender ID="TextBox1_AutoCompleteExtender" runat="server" ServicePath="AutoComplete.asmx"
                    ServiceMethod="GetData" TargetControlID="txtInfo" MinimumPrefixLength="1" CompletionSetCount="10">
                </cc1:AutoCompleteExtender>
    
            </div>
        </form>
    </body>
    </html>

    web service:

            [WebMethod]
            public string[] GetData(string prefixText, int count)
            {
                string[] data = new string[4] { "Star Wars", "teacher", "Memento", "Superman" };
                return data.Where(p => p.IndexOf(prefixText) >= 0).Take(count).ToArray();
            }
    

    You could also refer to link below for more details:

    https://ajaxcontroltoolkit.codeplex.com/wikipage?title=AutoComplete%20Control&referringTitle=Tutorials

    Best Regards,

    Nan Yu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, September 4, 2015 1:40 AM
  • User1724605321 posted

    Hi anupamabr,

    If you would like to pass along additional data to the AutoComplete extender it will now detect it automatically if your webservice returns an array of strings that have been serialized using AjaxControlToolkit.AutoCompleteExtender.CreateAutoCompleteItem(string, string) helper method .You could get primary key(id) and value returned , the AutoComplete extender will only show the value ,the primary key(id) will hide . After selected a item from AutoComplete extender ,you could bind the OnClientItemSelected event to get the id and put the id value to a hidden field  . Simple demo is for your reference:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AutoCompleteExtender.aspx.cs" Inherits="TestAjax.AutoCompleteExtender" %>
    
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript" src="Scripts/jquery-2.1.4.js"></script>
        <script type="text/javascript">
            function GetID(source, eventArgs) {
                var HdnKey = eventArgs.get_value();
                document.getElementById("hdnID").value = HdnKey;
            }
            function showID()
            {
                alert(document.getElementById("hdnID").value )
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server" />
            <div>
                <asp:TextBox ID="txtInfo" runat="server"></asp:TextBox>
                <cc1:AutoCompleteExtender ID="TextBox1_AutoCompleteExtender" runat="server" ServicePath="AutoComplete.asmx"
                    ServiceMethod="GetData1" TargetControlID="txtInfo" MinimumPrefixLength="1" CompletionSetCount="10" OnClientItemSelected="GetID">
                </cc1:AutoCompleteExtender>
                <asp:HiddenField ID="hdnID" runat="server" />
                <input id="Button1" type="button" value="button" onclick="showID()"/>
            </div>
        </form>
    </body>
    </html>
    

    ASMX:

           [WebMethod]
            public string[] GetData1(string prefixText, int count)
            {
                List<string> items = new List<string>(count);
    
                string str = AjaxControlToolkit.AutoCompleteExtender.CreateAutoCompleteItem("test", Convert.ToString(1));
                items.Add(str);
    
    
                return items.ToArray();
            }

    Best Regards,

    Nan Yu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, September 7, 2015 10:28 PM

All replies

  • User1724605321 posted

    Hi anupamabr,

    I would like to fill the rest of the elements on my web page based on the selected value. What is the best method to do so. I was thinking of using textbox textchanged event .. Is there any thing else.. Please advise

    You could also use AutoComplete extender which is an ASP.NET AJAX extender that can be attached to any TextBox control, and will associate that control with a popup panel to display words that begin with the prefix typed into the textbox. Code below is for your reference:

    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript" src="Scripts/jquery-2.1.4.js"></script>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server" />
            <div>
                <asp:TextBox ID="txtInfo" runat="server"></asp:TextBox>
                <cc1:AutoCompleteExtender ID="TextBox1_AutoCompleteExtender" runat="server" ServicePath="AutoComplete.asmx"
                    ServiceMethod="GetData" TargetControlID="txtInfo" MinimumPrefixLength="1" CompletionSetCount="10">
                </cc1:AutoCompleteExtender>
    
            </div>
        </form>
    </body>
    </html>

    web service:

            [WebMethod]
            public string[] GetData(string prefixText, int count)
            {
                string[] data = new string[4] { "Star Wars", "teacher", "Memento", "Superman" };
                return data.Where(p => p.IndexOf(prefixText) >= 0).Take(count).ToArray();
            }
    

    You could also refer to link below for more details:

    https://ajaxcontroltoolkit.codeplex.com/wikipage?title=AutoComplete%20Control&referringTitle=Tutorials

    Best Regards,

    Nan Yu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, September 4, 2015 1:40 AM
  • User-651692633 posted

    I am using Autocomplete extenderand fetching primary key along with another column. I would like to hide primary key from textbox and use primary key as hiddenfield value. How do I do that

    Friday, September 4, 2015 4:50 PM
  • User1724605321 posted

    Hi anupamabr,

    I would like to hide primary key from textbox and use primary key as hiddenfield value

    Please refer to link :http://forums.asp.net/t/1348315.aspx?AutoCompleteExtender+Get+Primary+Key+into+HiddenField

    You could split the primary key out and set value in hidden field , you could also click here for a  custom Autocomplete control .

    Best Regards,

    Nan Yu

    Sunday, September 6, 2015 8:40 PM
  • User-651692633 posted

    Thanks for your response.. My issue is hiding id value from textbox... how do I do that

    Monday, September 7, 2015 8:00 PM
  • User1724605321 posted

    Hi anupamabr,

    If you would like to pass along additional data to the AutoComplete extender it will now detect it automatically if your webservice returns an array of strings that have been serialized using AjaxControlToolkit.AutoCompleteExtender.CreateAutoCompleteItem(string, string) helper method .You could get primary key(id) and value returned , the AutoComplete extender will only show the value ,the primary key(id) will hide . After selected a item from AutoComplete extender ,you could bind the OnClientItemSelected event to get the id and put the id value to a hidden field  . Simple demo is for your reference:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AutoCompleteExtender.aspx.cs" Inherits="TestAjax.AutoCompleteExtender" %>
    
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript" src="Scripts/jquery-2.1.4.js"></script>
        <script type="text/javascript">
            function GetID(source, eventArgs) {
                var HdnKey = eventArgs.get_value();
                document.getElementById("hdnID").value = HdnKey;
            }
            function showID()
            {
                alert(document.getElementById("hdnID").value )
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server" />
            <div>
                <asp:TextBox ID="txtInfo" runat="server"></asp:TextBox>
                <cc1:AutoCompleteExtender ID="TextBox1_AutoCompleteExtender" runat="server" ServicePath="AutoComplete.asmx"
                    ServiceMethod="GetData1" TargetControlID="txtInfo" MinimumPrefixLength="1" CompletionSetCount="10" OnClientItemSelected="GetID">
                </cc1:AutoCompleteExtender>
                <asp:HiddenField ID="hdnID" runat="server" />
                <input id="Button1" type="button" value="button" onclick="showID()"/>
            </div>
        </form>
    </body>
    </html>
    

    ASMX:

           [WebMethod]
            public string[] GetData1(string prefixText, int count)
            {
                List<string> items = new List<string>(count);
    
                string str = AjaxControlToolkit.AutoCompleteExtender.CreateAutoCompleteItem("test", Convert.ToString(1));
                items.Add(str);
    
    
                return items.ToArray();
            }

    Best Regards,

    Nan Yu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, September 7, 2015 10:28 PM