AJAX combo box not searching specific letters in the word (data) in asp.net C#

Gani_tpt 1,466 Reputation points
2024-02-23T08:11:42.64+00:00

I am using AJAX dropdown controls for dual purpose (Search and select). I have been facing some issue in that controls. When i search the particular "letter", it wil not be filtered data in the combo box. What is the problem and how to solve this...? Pls. help and this is urgent

ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,234 questions
{count} votes

Accepted answer
  1. Lan Huang-MSFT 25,156 Reputation points Microsoft Vendor
    2024-02-23T09:44:49.44+00:00

    Hi @Gani_tpt, From your description, the AJAX ComboBox won't do what you want because the input is a dropdown and it will only select the data you are searching for. User's image

    You can achieve the effect you want with the jQuery AutoComplete method. https://jqueryui.com/autocomplete/ Below is a simple example for your reference.

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.0.min.js" type="text/javascript"></script>
        <script src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/jquery-ui.min.js" type="text/javascript"></script>
        <link href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/themes/blitzer/jquery-ui.css"
            rel="Stylesheet" type="text/css" />
        <script type="text/javascript">
            $(function () {
                $("[id$=txtSearch]").autocomplete({
                    source: function (request, response) {
                        $.ajax({
                            url: '<%=ResolveUrl("~/WebForm1.aspx/GetCustomers") %>',
                        data: "{ 'prefix': '" + request.term + "'}",
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        success: function (data) {
                            response($.map(data.d, function (item) {
                                return {
                                    label: item.split('-')[0],
                                    val: item.split('-')[1]
                                }
                            }))
                        },
                        error: function (response) {
                            alert(response.responseText);
                        },
                        failure: function (response) {
                            alert(response.responseText);
                        }
                    });
                },
                select: function (e, i) {
                    $("[id$=hfCustomerId]").val(i.item.val);
                },
                minLength: 1
            });
        });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                Enter search term:
                <asp:TextBox ID="txtSearch" runat="server" />
                <asp:HiddenField ID="hfCustomerId" runat="server" />
              
            </div>
        </form>
    </body>
    </html>
    
     <WebMethod()>
     Public Shared Function GetCustomers(prefix As String) As String()
         Dim customers As New List(Of String)()
         Using conn As New SqlConnection()
             conn.ConnectionString = ConfigurationManager.ConnectionStrings("constr").ConnectionString
             Using cmd As New SqlCommand()
                 cmd.CommandText = "select Name, CustomerId from Customers where Name like @SearchText + '%'"
                 cmd.Parameters.AddWithValue("@SearchText", prefix)
                 cmd.Connection = conn
                 conn.Open()
                 Using sdr As SqlDataReader = cmd.ExecuteReader()
                     While sdr.Read()
                         customers.Add(String.Format("{0}-{1}", sdr("Name"), sdr("CustomerId")))
                     End While
                 End Using
                 conn.Close()
             End Using
         End Using
         Return customers.ToArray()
     End Function
    

    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 additional answers

Sort by: Most helpful