Auto populate AutoCompleteExtender with all possibilities on first click

Question

I am trying to have autoCompleteExtender to populate on focus of a textbox all possibilities. So far I am having no luck. I have tried adding onfucus in the textbox tag to call a js function that calls the webmethod to populate from a datatable with no luck. The webmethod is being called but nothing shows up on the page. Only after typing something in the textbox does any suggestions turn up. Here is the aspx page control:

<div title="Model" runat="server" style="text-align:left; padding:20px"><strong>Model</strong>
                <asp:TextBox ID="tbModel" runat="server" onfocus="ModelTBOnFocus()"></asp:TextBox>
                <div id="ModelListPlacement" style="height:100px; overflow-y:scroll;" ></div>
                    <ajaxToolkit:AutoCompleteExtender ID="tbModel_AutoCompleteExtender" runat="server" DelimiterCharacters=""
                        Enabled="True" ServiceMethod="GetListofModels" MinimumPrefixLength="1" EnableCaching="true"
                        ServicePath="" TargetControlID="tbModel" CompletionInterval="50" CompletionSetCount="40"
                        CompletionListElementID="ModelListPlacement"></ajaxToolkit:AutoCompleteExtender>
            </div>

And Here is the CodeBehind webMethod:

[System.Web.Script.Services.ScriptMethod()]
        [System.Web.Services.WebMethod]
        public static List<string> GetListofModels(string prefixText)
        {
            using (SqlConnection sqlconn = new SqlConnection(GetConnectionStringValue("")))
            {
                sqlconn.Open();
                SqlCommand cmd = new SqlCommand("SELECT DISTINCT(Model) FROM Assets WHERE Model like '" + prefixText + "%' " + ModelQuery, sqlconn);
                cmd.Parameters.AddWithValue("@Model", prefixText);
                SqlDataAdapter da = new SqlDataAdapter(cmd);
                DataTable dt = new DataTable();
                da.Fill(dt);
                List<string> Models = new List<string>();
                TextInfo myTI = CultureInfo.CurrentCulture.TextInfo;
                for (int i = 0; i < dt.Rows.Count; i++)
                {
                    string model = myTI.ToTitleCase(dt.Rows[i]["Model"].ToString().ToLower());
                    Models.Add(model);
                }
                return Models;
            }
        }

This is working code. I am just trying to get all possibilities to show up when the textbox is focused. Any help would be much appreciated. Thanks!

EDIT: This js is working also, but I am not getting any suggestions until something is typed. Here is the javascript code to call the function:

<script type="text/javascript">
        function ModelTBOnFocus() {
            PageMethods.GetListofModels("");
        }
</script>

Would you mind sharing the javascript code you wrote for focus? Why I ask is that auto complete has its own focus event that might help trigger your code. The auto complete focus event is ```autocompletefocus``` — Hopeless, Jun 21 '17 at 16:55
how would i implement the autocompletefocus in this code. I tried to add it to the autoCompleteExtender tag, but error says no public property exists. — Icculus018, Jun 21 '17 at 17:04
Hmm not sure on that, have you had a chance to try out some of the solutions in this https://stackoverflow.com/questions/4132058/display-jquery-ui-auto-complete-list-on-focus-event. Try adding this ```$(this).data("autocomplete").search($(this).val());``` to your javascript function, and pass through ```this``` from the asp page. — Hopeless, Jun 21 '17 at 17:11

score 0 · Answer 1 · answered Jun 21 '17 at 18:40

0

Found my answer: In order to solve this problem I had to set the MinimumPrefixLength="0"

answered Jun 21 '17 at 18:40

Icculus018

1,018
11
19

Auto populate AutoCompleteExtender with all possibilities on first click

1 Answers1

Linked