How to get the selected item ID (SelectValueByKey)from Autocomplete in Client Side Event

Hi

How to get the selected item ID (SelectValueByKey)from Autocomplete in Client Side Event ?

      private void Bindcategory()
         {     
           List<Countries> c = new List<Countries>();
            c.Add(new Countries { text = "Austria", ID = "100001" });
            c.Add(new Countries { text = "Australia", ID = "20002" });
            c.Add(new Countries { text = "Bangladesh", ID = "300003" });

            this.categoryGrouping.DataSource = c;
            categoryGrouping.DataTextField = "text";
            categoryGrouping.DataUniqueKeyField = "ID";
            categoryGrouping.DataBind();
         }



      [Serializable]
        class Countries
        {
            public string text;
            public string ID;
        }


 <ej:Autocomplete ID="categoryGrouping" Width="205px"  ShowPopupButton="true" FilterType="Contains" HighlightSearch="true"  runat="server" WatermarkText="Select a category"/>

Thanks
Pratheep



3 Replies

KC Kasithangam C Syncfusion Team October 14, 2015 12:18 PM UTC

Hi Pratheep,

Thanks for contacting Syncfsuion Support.

We can get the selected item id in “ClientSideOnSelect” event argument in autocomplete.Please refer to the following code example for the same,

<code>

<ej:Autocomplete ID="categoryGrouping" Width="205px"  ShowPopupButton="true" FilterType="Contains" HighlightSearch="true"  runat="server" WatermarkText="Select a category" ClientSideOnSelect="OnSelect"/>



 <script type="text/javascript">

      

        function OnSelect(args)

        {

            alert(args.key);

        }

    </script>

</code>


We have prepared a sample based on this and you can refer to it from the following link:

Sample: Sample



Also, you can use “getSelectedItem()” method in “ClientSideOnSelect” event to get the selected item id. Refer to the following code example for the same,



<code>

<ej:Autocomplete ID="categoryGrouping" Width="205px"  ShowPopupButton="true" FilterType="Contains" HighlightSearch="true"  runat="server" WatermarkText="Select a category" ClientSideOnSelect="OnSelect"/>


<script type="text/javascript">

      

        function OnSelect(args)

        {

            var autocompleteObj = $("#<%=categoryGrouping.ClientID%>").data("ejAutocomplete");

            alert(autocompleteObj.getSelectedItems()[0].ID);

        }

    </script>

</code>


To know more about properties, methods and events of Autocomplete component, refer to the following API link,

http://help.syncfusion.com/js/api/ejautocomplete

Please let us know if you have any queries.

Regards,

Kasithangam



PR Pratheep October 15, 2015 01:32 AM UTC

Hi

it's Working fine

Thanks

Pratheep


RM Ragunath M Syncfusion Team October 15, 2015 10:06 AM UTC

Hi Pratheep
Thanks for your update.
Please let us know if you have any other quires.
Regards,
Ragunath M

Loader.
Up arrow icon