Custom Search Bar With Auto-Complete

AJAX(112) Apple(1) Application Builder(242) Application Factory(207) ASP.NET(95) ASP.NET 3.5(45) ASP.NET Code Generator(72) ASP.NET Membership(28) Azure(18) Barcodes(3) BLOB(18) Business Rules(1) Business Rules/Logic(140) BYOD(13) Caching(2) Calendar(5) Charts(29) Cloud(14) Cloud On Time(2) Cloud On Time for Windows 7(2) Code Generator(54) Collaboration(11) command line(1) Conflict Detection(1) Content Management System(11) COT Tools for Excel(26) CRUD(1) Custom Actions(1) Data Aquarium Framework(122) Data Sheet(9) Data Sources(22) Database Lookups(50) Deployment(22) Designer(177) DotNetNuke(12) EASE(20) Email(6) Features(99) Firebird(1) Form Builder(14) Globalization and Localization(6) Hypermedia(2) Installation(4) JavaScript(20) Kiosk(1) Low Code(3) Mac(1) Many-To-Many(4) Maps(6) Master/Detail(36) Microservices(4) Mobile(63) Mode Builder(3) Model Builder(3) MySQL(10) Native Apps(5) News(15) OAuth(5) OAuth Scopes(1) OAuth2(6) Offline(14) Oracle(10) PKCE(1) PostgreSQL(2) QR codes(2) Rapid Application Development(5) Reading Pane(2) Release Notes(163) Reports(48) REST(26) RESTful(21) RESTful Workshop(13) RFID tags(1) SaaS(7) Security(75) SharePoint(12) SPA(5) SQL Anywhere(3) SQL Server(26) Stored Procedure(4) Teamwork(15) Tips and Tricks(81) Tools for Excel(2) Touch UI(93) Transactions(5) Tutorials(183) Universal Windows Platform(3) User Interface(331) Video Tutorial(37) Web 2.0(100) Web App Generator(101) Web Application Generator(607) Web Form Builder(39) Web.Config(9) Workflow(28)
Sunday, March 21, 2010PrintSubscribe
Custom Search Bar With Auto-Complete

Learn to create custom search bars in Web Site Factory and Web Site Builder projects. The search bars are typically displayed above the grid views. Use any standard and commercial ASP.NET controls to capture the search parameters. We will show you how to implement a predictive input in your search fields without writing any code.

Custom Search Bar With Auto-Complete in ASP.NET/AJAX Web Apps

Watch this tutorial on our YouTube channel at

Here is the custom search bar of the sample application discussed in the tutorial when displayed in Google Chrome.


The markup of the ASP.NET user control from the example is presented below.

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="SearchControl.ascx.vb"
    Inherits="Controls_SearchControl" %>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <div class="SettingsPanel">
                        Product:<br />
                        <aquarium:DataViewTextBox ID="ProductNameText" runat="server" 
                            DataController="Products" DistinctValueFieldName="ProductName" />
                        Supplier:<br />
                        <aquarium:DataViewTextBox ID="SupplierCompanyNameText" runat="server" 
                            DataController="Products" DistinctValueFieldName="SupplierCompanyName" />
                        Category:<br />
                        <aquarium:DataViewTextBox ID="CategoryCategoryNameText" runat="server" 
                            DataController="Products" DistinctValueFieldName="CategoryCategoryName" />
                        <br />
                        <asp:Button ID="SearchButton" runat="server" Text="Search" />
<div id="ProductList" runat="server">
<aquarium:DataViewExtender ID="ProductListExtender" runat="server" TargetControlID="ProductList"
    Controller="Products" ShowDescription="false" ShowQuickFind="false" />

Here is the code-behind class written in Visual Basic that uses DataViewExtender.AssignFilter method to execute the search operation in the client browser in response to the button pressed on the custom search bar.

Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports MyCompany.Data
Imports MyCompany.Web

Partial Public Class Controls_SearchControl
    Inherits System.Web.UI.UserControl
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
        If Not IsPostBack Then
            ProductNameText.Text = Session("ProductName")
            SupplierCompanyNameText.Text = Session("SupplierCompanyName")
            CategoryCategoryNameText.Text = Session("CategoryCategoryName")
        End If
    End Sub

    Protected Sub SearchButton_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles SearchButton.Click
        Dim filter As List(Of FieldFilter) = New List(Of FieldFilter)
        If String.IsNullOrEmpty(ProductNameText.Text) Then
            filter.Add(New FieldFilter("ProductName", RowFilterOperation.None))
            filter.Add(New FieldFilter("ProductName", RowFilterOperation.Like, ProductNameText.Text))
        End If
        If String.IsNullOrEmpty(SupplierCompanyNameText.Text) Then
            filter.Add(New FieldFilter("SupplierCompanyName", RowFilterOperation.None))
            filter.Add(New FieldFilter("SupplierCompanyName", RowFilterOperation.Like, SupplierCompanyNameText.Text))
        End If
        If String.IsNullOrEmpty(CategoryCategoryNameText.Text) Then
            filter.Add(New FieldFilter("CategoryCategoryName", RowFilterOperation.None))
            filter.Add(New FieldFilter("CategoryCategoryName", RowFilterOperation.Like, CategoryCategoryNameText.Text))
        End If
        Session("ProductName") = ProductNameText.Text
        Session("SupplierCompanyName") = SupplierCompanyNameText.Text
        Session("CategoryCategoryName") = CategoryCategoryNameText.Text
    End Sub
End Class