How to get all items when client enter % in autocomplete

Question

Hi,

ref my below code, this woks well, here I want to add one more option, when client type % symbol then items need to display in the txt_SubCategory textbox, kindly help me how to do that.

 $(function () {
                $('[id*=txt_SubCategory]').typeahead({
                    hint: true,
                    highlight: true,
                    minLength: 1,
                    source: function (request, response) {
                        if ($("#ddl_TicketCategory").val() == 0) {
                            $('#ddl_TicketCategory').css('border-color', 'red');
                            alert('Sorry!\nPlease Select a Primary Category Iteam!');
                            return false;
                        } else {
                            var categoryID = $('#ddl_TicketCategory').val();
                            $('#ddl_TicketCategory').css('border-color', 'blue');
                        }
                        $.ajax({
                            url: '<%=ResolveUrl("~/RegisterUser.aspx/Get_SubCategory") %>',
                            data: JSON.stringify({ 'prefix': request, 'categoryID': categoryID }),
                            dataType: "json",
                            type: "POST",
                            contentType: "application/json; charset=utf-8",
                            success: function (data) {
                                items = [];
                                map = {};
                                $.each(data.d, function (i, item) {
                                    var id = item.split('-')[1];
                                    var name = item.split('-')[0];
                                    map[name] = { id: id, name: name };
                                    items.push(name);
                                });
                                response(items);
                                $(".dropdown-menu").css("height", "auto");
                                $(".dropdown-menu").css("background-color", "#D3D3D3");
                            
                            },
                            error: function (response) {

                                alert(response.responseText);
                            },
                            failure: function (response) {
                                alert(response.responseText);
                            }
                        });
                    },
                    updater: function (item) {
                        $('[id*=hfSubCatgr]').val(map[item].id);
                        return item;
                    }
                });
            });



<WebMethod()>
    Public Shared Function Get_SubCategory(ByVal prefix As String, ByVal categoryID As String) As String()
        Dim CatgSubItem As New List(Of String)()
        Using conn As New SqlConnection()
            conn.ConnectionString = ConfigurationManager.ConnectionStrings("ICT_ConStr").ConnectionString
            Using cmd As New SqlCommand()
                cmd.CommandText = "SELECT DISTINCT [SubCategoryID],[SubCategoryName] FROM [dbo].[Category] Where [MasterCategoryID]=" & categoryID & " AND [SubCategoryName] like @SearchText + '%' "
                cmd.Parameters.AddWithValue("@SearchText", prefix)
                cmd.Connection = conn
                conn.Open()
                Using sdr As SqlDataReader = cmd.ExecuteReader()
                    While sdr.Read()
                        CatgSubItem.Add(String.Format("{0}-{1}", sdr("SubCategoryName"), sdr("SubCategoryID")))
                    End While
                End Using
                conn.Close()
            End Using
        End Using
        Return CatgSubItem.ToArray()
    End Function

Answer 1

Hi @Aypn CNN,

You can open the dropdown menu when the user clicks on the input box without entering any text.

First set minLength to 0, if you type and then backspace it will show all items.

minLength: 0,

Adding the following code will open the dropdown menu when the user clicks on the input.

        $('[id*=txt_SubCategory]').on("click", function () {
            ev = $.Event("keydown");
            ev.keyCode = ev.which = 40;
            $('[id*=txt_SubCategory]').trigger(ev);
            return true;
        });

        $('[id*=txt_SubCategory]').typeahead({
            hint: true,
            highlight: true,
            minLength: 0,         
            source: function (request, response) {

Best regards,
Lan Huang

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.