How to get all items when client enter % in autocomplete

Aypn CNN 446 Reputation points
2023-03-12T07:31:59.0766667+00:00

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
ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,233 questions
0 comments No comments
{count} votes

1 answer

Sort by: Most helpful
  1. Lan Huang-MSFT 25,156 Reputation points Microsoft Vendor
    2023-03-13T05:44:56.7366667+00:00

    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) {
    

    4

    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.

    0 comments No comments