ASPForums.Net RSS Feedhttp://www.aspforums.net/Handlers/RSS.ashxLatest additions to the content that appears on ASPForums.Net(c) 2019 www.aspforums.com. All rights reserved.Search (Filter) ASP.Net ListView on TextBox KeyPress using jQuery AJAX<p>Hi <a class="username" rel="rani"> rani</a>,</p> <p>Refer below sample.</p> <p><span style="text-decoration: underline;"><strong>Database</strong></span></p> <p>For this sample I have used of NorthWind database that you can download using the link given below.</p> <p><span style="text-decoration: underline;"><a href="%20https://www.aspsnippets.com/Articles/Install-the-Northwind-and-Pubs-Sample-Databases-in-SQL-Server-Express.aspx" target="_blank">Download Northwind Database</a></span></p> <p><span style="text-decoration: underline;"><strong>SQL</strong></span></p> <pre class="brush: sql">CREATE PROCEDURE [dbo].[GetCustomers_ByContactName] @SearchTerm VARCHAR(100) = &#39;&#39; AS BEGIN SET NOCOUNT ON; SELECT TOP 5 [CustomerID] ,[CompanyName] ,[ContactName] ,[City] FROM [Customers] WHERE [ContactName] LIKE @SearchTerm + &#39;%&#39; OR @SearchTerm = &#39;&#39; END</pre> <p><span style="text-decoration: underline;"><strong>HTML</strong></span></p> <pre class="brush: html">&lt;script type=&#34;text/javascript&#34; src=&#34;http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34;&gt; $(function () { GetCustomers(); }); $(&#34;[id*=txtSearch]&#34;).live(&#34;keyup&#34;, function () { GetCustomers(); }); function SearchTerm() { return jQuery.trim($(&#34;[id*=txtSearch]&#34;).val()); }; function GetCustomers() { $.ajax({ type: &#34;POST&#34;, url: &#34;Default.aspx/GetCustomers&#34;, data: &#39;{searchTerm: &#34;&#39; + SearchTerm() + &#39;&#34;}&#39;, contentType: &#34;application/json; charset=utf-8&#34;, dataType: &#34;json&#34;, success: OnSuccess, failure: function (response) { alert(response.d); }, error: function (response) { alert(response.d); } }); } var row; function OnSuccess(response) { var xmlDoc = $.parseXML(response.d); var xml = $(xmlDoc); var customers = xml.find(&#34;Customers&#34;); if (row == null) { row = $(&#34;#dvCustomers table&#34;).eq(0).clone(true); } $(&#34;#dvCustomers&#34;).empty(); if (customers.length &gt; 0) { customers.each(function () { var customer = $(this); $(&#34;.CustomerID&#34;, row).html(customer.find(&#34;CustomerID&#34;).text()); $(&#34;.ContactName&#34;, row).html(customer.find(&#34;ContactName&#34;).text()); $(&#34;.City&#34;, row).html(customer.find(&#34;City&#34;).text()); $(&#34;#dvCustomers&#34;).append(row).append(&#34;&lt;br /&gt;&#34;); row = $(&#34;#dvCustomers table&#34;).eq(0).clone(true); }); } else { var empty_row = row.clone(true); $(&#34;td:first-child&#34;, empty_row).attr(&#34;colspan&#34;, $(&#34;td&#34;, row).length); $(&#34;td:first-child&#34;, empty_row).attr(&#34;align&#34;, &#34;center&#34;); $(&#34;td:first-child&#34;, empty_row).html(&#34;No records found for the search criteria.&#34;); $(&#34;tr&#34;, empty_row).not($(&#34;tr:first-child&#34;, empty_row)).remove(); $(&#34;[id*=dvCustomers]&#34;).append(empty_row); } } &lt;/script&gt; Search: &lt;asp:TextBox ID=&#34;txtSearch&#34; runat=&#34;server&#34; /&gt;&lt;hr /&gt; &lt;div id=&#34;dvCustomers&#34;&gt; &nbsp;&nbsp;&nbsp; &lt;asp:DataList runat=&#34;server&#34; ID=&#34;dlCustomers&#34;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;ItemTemplate&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;table class=&#34;tblCustomer&#34; cellpadding=&#34;2&#34; cellspacing=&#34;0&#34; border=&#34;1&#34;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;tr&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;b&gt;&lt;u&gt;&lt;span class=&#34;CustomerID&#34;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;%# Eval(&#34;CustomerID&#34;)%&gt;&lt;/span&gt;&lt;/u&gt;&lt;/b&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/tr&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;tr&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;b&gt;ContactName: &lt;/b&gt;&lt;span class=&#34;ContactName&#34; style=&#34;background-color: Red&#34;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;%# Eval(&#34;ContactName&#34;)%&gt;&lt;/span&gt;&lt;br /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;b&gt;City: &lt;/b&gt;&lt;span class=&#34;City&#34;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;%# Eval(&#34;City&#34;)%&gt;&lt;/span&gt;&lt;br /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/tr&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/table&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/ItemTemplate&gt; &nbsp;&nbsp;&nbsp; &lt;/asp:DataList&gt; &lt;/div&gt;</pre> <p><span style="text-decoration: underline;"><strong>Namespaces</strong></span></p> <p><strong>C#</strong></p> <pre class="brush: csharp">using System.Data; using System.Web.Services; using System.Configuration; using System.Data.SqlClient;</pre> <p><strong>VB.Net</strong></p> <pre class="brush: vb">Imports System.Data Imports System.Web.Services Imports System.Configuration Imports System.Data.SqlClient</pre> <p><span style="text-decoration: underline;"><strong>Code</strong></span></p> <p><strong>C#</strong></p> <pre class="brush: csharp">protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { BindDummyRow(); } } private void BindDummyRow() { DataTable dummy = new DataTable(); dummy.Columns.Add(&#34;CustomerID&#34;); dummy.Columns.Add(&#34;ContactName&#34;); dummy.Columns.Add(&#34;City&#34;); dummy.Rows.Add(); dlCustomers.DataSource = dummy; dlCustomers.DataBind(); } [WebMethod] public static string GetCustomers(string searchTerm) { string query = &#34;[GetCustomers_ByContactName]&#34;; SqlCommand cmd = new SqlCommand(query); cmd.CommandType = CommandType.StoredProcedure; cmd.Parameters.AddWithValue(&#34;@SearchTerm&#34;, searchTerm); return GetData(cmd).GetXml(); } private static DataSet GetData(SqlCommand cmd) { string strConnString = ConfigurationManager.ConnectionStrings[&#34;conString&#34;].ConnectionString; using (SqlConnection con = new SqlConnection(strConnString)) { using (SqlDataAdapter sda = new SqlDataAdapter()) { cmd.Connection = con; sda.SelectCommand = cmd; using (DataSet ds = new DataSet()) { sda.Fill(ds, &#34;Customers&#34;); return ds; } } } }</pre> <p><strong>VB.Net</strong></p> <pre class="brush: vb"> Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)Handle Me.Load If Not IsPostBack Then BindDummyRow() End If End Sub Private Sub BindDummyRow() Dim dummy As DataTable = New DataTable() dummy.Columns.Add(&#34;CustomerID&#34;) dummy.Columns.Add(&#34;ContactName&#34;) dummy.Columns.Add(&#34;City&#34;) dummy.Rows.Add() dlCustomers.DataSource = dummy dlCustomers.DataBind() End Sub &lt;WebMethod&gt; Public Shared Function GetCustomers(ByVal searchTerm As String) As String Dim query As String = &#34;[GetCustomers_ByContactName]&#34; Dim cmd As SqlCommand = New SqlCommand(query) cmd.CommandType = CommandType.StoredProcedure cmd.Parameters.AddWithValue(&#34;@SearchTerm&#34;, searchTerm) Return GetData(cmd).GetXml() End Function Private Shared Function GetData(ByVal cmd As SqlCommand) As DataSet Dim strConnString As String = ConfigurationManager.ConnectionStrings(&#34;conString&#34;).ConnectionString Using con As SqlConnection = New SqlConnection(strConnString) Using sda As SqlDataAdapter = New SqlDataAdapter() cmd.Connection = con sda.SelectCommand = cmd Using ds As DataSet = New DataSet() sda.Fill(ds, &#34;Customers&#34;) Return ds End Using End Using End Using End Function</pre> <p><span style="text-decoration: underline;"><strong>Screenshot</strong></span></p> <p><img src="https://i.imgur.com/BFMQOAZ.gif" alt="" width="268" height="557" /></p>https://www.aspforums.net:443/Threads/740049/Search-Filter-ASPNet-ListView-on-TextBox-KeyPress-using-jQuery-AJAX/https://www.aspforums.net:443/Threads/740049/Search-Filter-ASPNet-ListView-on-TextBox-KeyPress-using-jQuery-AJAX/Fri, 26 Jul 2019 03:19:19 GMT