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

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. 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.

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

Accepted answer

Lan Huang-MSFT 28,841 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.

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.
Please sign in to rate this answer.
BeUnique 2,112 Reputation points

2024-02-23T10:44:58.2133333+00:00

Hi @Lan Huang-MSFT , Thanks for your reply again. where is the Submit function in the below code and what it will come. <asp:Button ID="Button1" Text="Submit" runat="server" OnClick="Submit" /> your code is showing only Textbox search. But, I want dual control (both textbox and combo box in single control) for the user. because, binding data is more than 1000 records. so, user cannot remember all the items. hence, user can either select the list from the combo box, or if they know they will enter directly in the text box. How to achieve this..?

AgaveJoe 27,696 Reputation points

2024-02-23T13:04:25.32+00:00

I want dual control (both textbox and combo box in single control) for the user. because, binding data is more than 1000 records

That's exactly how the sample code works! Did you try the code?

Submit function in the below code and what it will come. <asp:Button ID="Button1" Text="Submit" runat="server" OnClick="Submit" />

It is a standard form post. You can get the value of the textbox using standard Web Forms syntax.

txtSearch.Text

Lan Huang-MSFT 28,841 Reputation points Microsoft Vendor

2024-02-26T01:45:06.3266667+00:00

Hi @Gani_tpt,

where is the Submit function in the below code and what it will come.

You can ignore the Submit function because this is just a test of mine and does not affect the implementation of the function.

your code is showing only Textbox search. But, I want dual control (both textbox and combo box in single control) for the user. because, binding data is more than 1000 records. so, user cannot remember all the items. hence, user can either select the list from the combo box, or if they know they will enter directly in the text box. How to achieve this..?

From my understanding, you want to achieve all lists in the database, you can change minLength to 0 and then add the following code.

$("#txtSearch").on('focus', function () { if ($("#txtSearch").val() == '') { $("#txtSearch").autocomplete("search", ""); } });

BeUnique 2,112 Reputation points

2024-02-26T10:56:23.96+00:00

Hi @Lan Huang-MSFT ,

Thanks for your excellent information. It is working fine.

I am facing another side issue as mentioned below.

1 . Some data having special character like "ASP-JM30-WO101". How to handle this type of word's

Showing data in the text box is too height if my data is more than 10 records. How to resize the drop down height (like scrolling the data)..?

How to handle the above two points.?
Sign in to comment

Share via

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

0 additional answers