Ajax 1.0 Autocomplete textbox asp.net 2.0

Discussion in 'AJAX Snips' started by BluJag, Feb 9, 2007.

  1. BluJag

    BluJag Perch

    9 Feb 07
    ASP.NET version 2.0
    AJAX.NET version 1.0 (as released a couple of weeks ago)
    Visual Web Developer Express Edition (VWD)
    Language VB.NET

    Using the ajax autocomplete gizmo so you can have your text box show a drop down list like "Google suggest" do when you type in a search term.

    Spent hours (and hours...) trawling the net trying to get the thing to work, and now I have I thought I'd share how I did it to save anyone else the trouble.

    Create an ASP.Net Ajax Enabled Web Site from file menu of VWD

    Create a bin diectory within the root of this web site. Inside it place
    Microsoft.Web.Preview.dll and AjaxControlToolkit.dll You will have downloaded these from the AJAX : The Official Microsoft ASP.NET AJAX Site

    on default.aspx page drag

    1 a ScriptManager from the AJAX Extensions part of the VWD Toolbox
    2 a text box - call it txtTest
    3 a AutoCompleteExtender from the Ajax Control Kit part of the VWD Toolbox (note - if this section of the Toolbox is not there you need to copy and paste the AjaxControlToolkit.dll onto a new section of the Toolbox - this will create all the tools for you)

    Go to the source view of default.aspx and make it so

    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <META http-equiv="Page-Enter" content="blendTrans(Duration=2)">

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
    <title>Test Page</title>

    <form id="Form1" runat=server>
    <asp:ScriptManager ID="ScriptManager1" runat="server">

    <div ID="AutoComplete" runat="server" class="some css style you've defined"></div>

    <asp:TextBox ID="txtTest" runat="server" CssClass="some css style you've defined" MaxLength="50"></asp:TextBox>

    <cc1:autocompleteextender id="aceTest" Enabled=true TargetControlID="txtTest" ServiceMethod="GetData" runat="server" ServicePath="autocomplete.asmx" CompletionInterval="1" MinimumPrefixLength="1" CompletionListElementID="AutoComplete" CompletionSetCount="20" EnableCaching=true></cc1:autocompleteextender>



    Now, from the file menu of VWD select New File and select Web Service and call it autocomplete.asmx Do not tick the Place code in separate file box

    Open up autocomplete.asmx and make it so

    <%@ WebService Language="VB" Class="autocomplete" %>

    Imports System.Web
    Imports System.Web.Services
    Imports System.Web.Services.Protocols
    Imports System.Data
    Imports System.Data.SqlClient

    <System.Web.Script.Services.ScriptService()> _
    <WebService(Namespace:="http://someurl.com/")> _
    <WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
    Public Class autocomplete
    Inherits System.Web.Services.WebService

    <WebMethod()> _
    <System.Web.Script.Services.ScriptMethod()> _
    Public Function GetData(ByVal prefixText As String, ByVal count As Integer) As String()

    GetData = GetMembers(prefixText, count)

    End Function

    Private Function GetMembers(ByVal prefixText As String, ByVal count As Integer) As String()

    ' code to retrive list of members from SQL database
    Dim SR As SqlDataReader
    Dim DB As New Admin.Helpers 'class where stored proc is called to query database

    Dim result(10000) As String
    Dim members(10000) As String
    Dim Co As String = ""

    'What we want is a long string of members names, separated by a : so any method you use to achieve this will be fine. The string will end up lik e this Co="Abel:Jones:Kahn:Zak:"

    SR = DB.GetMembers 'method in the Admin class

    While SR.Read
    Co = Co & SR("Members") & ":"
    End While


    members = Co.Split(":")

    Dim listOfMembers As String = String.Empty

    '---find members being with the prefixText---

    For Each member As String In members
    If member.StartsWith(prefixText, StringComparison.OrdinalIgnoreCase) Then

    '---add the member name to the list---

    listOfmembers += member & vbLf
    End If

    '---convert the members list into an array---

    result = listOfmembers.Split(vbLf)

    '---sort the array---


    GetMembers = result

    End Function

    End Class

    That should be it - give it a try - it's really neat! The members name ends up in txtTest from where you can then do further procesing etc.
    In this example all the files (except the dll's in the bin dir) are in the root directory.
  2. subil

    subil Guest

    i cant understand the helper class.if u can send me the complete code and db details it would be a gr8 help.thank u.[email protected]
  3. SubSpace

    SubSpace Bass

    The auto completion requires a webservice to supply it with data, which is what the helper class is.
    That webservice requirement is quite annoying really :(
  4. eliza81

    eliza81 Guppy

    The solution is to add autocomplete="off" attribute to textbox tag, which will help to stop auto suggestion behaviour for that particular textbox.
    And if you want to stop that behaviour for all the textboxes that are present inside a form then add autocomplete="off" attribute to form tag.

    According to HTML specifications, autocomplete is an unrecognized attribute which was originally created by Microsoft (feature of remembering what you have entered in previous text fields with the same name, available first in Internet Explorer) and has adopted by all other major modern browsers (except Opera).

Share This Page

JodoHost - 26,000 hosting end-users in 100 countries
Plesk Web Hosting
VPS Hosting
H-Sphere Web Hosting
Other Services