[RESOLVED] How to Use Ajaxcontroltoolki autocomplete with database data

OccId = CType(item.FindControl("occupation"), TextBox).Text
Dim chosenOccupation As String = OccId.Text



User types stuff into textbox. User gets autosuggest. User picks a value. Value goes into textbox.

User clicks submit.

You loop through the rows, use FindControl, find the textbox.
Read from textbox.

Hi mendhak,

sorry but, my problem isn't that. I can get the textbox text. problem is:

I have a key/value pair that gets returned to the autocomplete textbox.
I want it so that when a user selects an item from the autocomplete, i then get the corresponding value of that item for example:

Programmer has the id value of 6.

I can get that if value in javascript which i've posted. Assigning the value to a hidden field on the page is a problem. I need the clientid of the autocomplete. I then need the javascript function to run when an item is selected, and assign the value to the hidden textbox.

please help again.

i'm giving up:cry:. I can't believe how annoying .Net is. I'd rather do this in classic asp and use mootools.

Hey,

If I had the choice, I would definitely use .Net over classic ASP, it is far superior!! So, if I were you, I wouldn't give up yet.

I still haven't fully grasped exactly what you are trying to do, so I don't think I can be much help without some more information. For instance, can you post some screen shots of what you are doing? I think that might help to visualize the problem.

Also, can you list the full requirements of what it is you are trying to do? It may be the case that there is another way to implement what you want, and it is just the case that the requirement has been lost along the way in this thread.

Gary

thanks gep13. I've attached a screenshot. My occupation textbox is attached to an autocompleteextender. When you select an item from the autocomplete textbox. the autocomplete textbox get's a key/value pair returned to it via a webservice:

Code:

---

Public Function GetOccupations(ByVal prefixText As String) As String()
        'Dim OccList As New List(Of combodata)
        Dim OccList As New List(Of String)
        Using con As New MySqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings("constr").ConnectionString)
            Dim OccReader As MySqlDataReader
            Dim occCmd As New MySqlCommand("SELECT occupationid,descr FROM occupations WHERE lcase(descr) like ?descr;", con)
            occCmd.Parameters.AddWithValue("?descr", prefixText & "%")

            con.Open()

            OccReader = occCmd.ExecuteReader

            While (OccReader.Read)

                If Not OccReader.IsDBNull(1) Then
                    'OccList.Add(New combodata With {.ID = OccReader.Item(0), .Description = OccReader.Item(1)})
                    OccList.Add(AjaxControlToolkit.AutoCompleteExtender.CreateAutoCompleteItem(OccReader.GetString(1), OccReader.GetUInt32(0)))
                End If
            End While

            con.Close()
            OccReader.Close()
        End Using
        Return OccList.ToArray

the autocomplete extender calls a javascript function IAmSelected when a user selects an item:

       

Code:

       

---

<asp:TextBox ID="occupation" CssClass="autocompletetextbox" runat="server" Text='<%#Container.DataItem("occupation")%>'></asp:TextBox></td>

<cc1:AutoCompleteExtender ID="OccAutoCompleteExtender" TargetControlID="occupation" ServicePath="ClService.asmx" ServiceMethod="GetOccupations" MinimumPrefixLength="2" CompletionInterval="1000" OnClientItemSelected="IAmSelected"
                 CompletionListCssClass="autocomplete_list" CompletionListItemCssClass="autocomplete_listItem" CompletionListHighlightedItemCssClass="autocomplete_highlighted_listitem" runat="server">
                </cc1:AutoCompleteExtender>

---

so in javascript, if i do this when an item is selected:

The Function being IAmSelected is added as an event handler to the ItemSelected event on the flyout of the AutoCompleteExtender.

It gets the Arguments as are specified for the Eventhandlers of the ItemSelected Event in the AutoCompleteExtender's behavior.


function IAmSelected( source, eventArgs )

{

  alert( " Key : "+ eventArgs.get_text() +"  Value :  "+eventArgs.get_value());

}


    End Function

---

i get the key/value data.

Problem i am having is assigning that eventArgs.get_value to a hiddenfield. Because since all my controls are in a repeater and the page uses a master page, the controls get renamed like this:

Code:

---

<input type="hidden" name="ctl00$ContentPlaceHolder1$GuardianRepeater$ctl01$MaskedEditExtender1_ClientState" id="ctl00_ContentPlaceHolder1_GuardianRepeater_ctl01_MaskedEditExtender1_ClientState" />

---

please help me.

so i cant say document.getElementByID(occupation) = eventArgs.get_value

ok i found this site:

http://mattberseth.com/blog/2007/08/...d_find_as.html

using sample usage 2 I tried:

Code:

---

If Not (ClientScript.IsClientScriptBlockRegistered("MyScript")) Then
                ClientScript.RegisterClientScriptBlock(Me.GetType, "MyScript", "function IAmSelected( source, eventArgs ) { alert($get(<%= this.occupation.ClientID %>));}", True)
            End If

---

but i get a script error. Why is this? trying this:

Code:

---

$get('ctl00_ContentPlaceHolder1_GuardianRepeater_ctl01_occupation')

---

i get an element successfully.

Okay, first question would be, what is the script error that you are getting?

Also, if you do a view source on the page, what do you see?

Also, to help my understanding, what is the requirement for the IAmSelected function, I don't see why you need it?

Surely you could inspect each of the controls, TextBox and HiddenField in the PostBack to the server.

Gary

Also,

If you ARE wanting to maintain the structure that you currently have, then I would have thought that Sample 3 in the link that you provided would do exactly what you want.

Refactor the IAmSelected method to take in the ClientID as a parameter, and then use the $get method on the ID.

From what I can see, everything that you want to achieve is detailed on that page.

Gary

now i did this, added ' around the following:

Code:

---

'<&#37;= this.occupation.ClientID %>'

---

ain't getting an error now. purpose of the javascript is to assign the selected items value to the hiddenfield. Haven't got there yet. I just do an alert to test if i get the value successfully. now i get null returned.

the source is like this for the javascript:

Code:

---

<script type="text/javascript">
//<![CDATA[
function IAmSelected( source, eventArgs ) { alert($get('<%= this.occupation.ClientID %>'));}//]]>
</script>

---

and for the occupation textbox extenders:

Code:

---

Sys.Application.add_init(function() {
    $create(AjaxControlToolkit.AutoCompleteBehavior, {"completionListCssClass":"autocomplete_list","completionListItemCssClass":"autocomplete_listItem","delimiterCharacters":"","highlightedItemCssClass":"autocomplete_highlighted_listitem","id":"ctl00_ContentPlaceHolder1_GuardianRepeater_ctl01_OccAutoCompleteExtender","minimumPrefixLength":2,"serviceMethod":"GetOccupations","servicePath":"ClService.asmx"}, {"itemSelected":IAmSelected}, null, $get("ctl00_ContentPlaceHolder1_GuardianRepeater_ctl01_occupation"));
});

---

Code:

---

Sys.Application.add_init(function() {
    $create(AjaxControlToolkit.AutoCompleteBehavior, {"completionListCssClass":"autocomplete_list","completionListItemCssClass":"autocomplete_listItem","delimiterCharacters":"","highlightedItemCssClass":"autocomplete_highlighted_listitem","id":"ctl00_ContentPlaceHolder1_GuardianRepeater_ctl03_OccAutoCompleteExtender","minimumPrefixLength":2,"serviceMethod":"GetOccupations","servicePath":"ClService.asmx"}, {"itemSelected":IAmSelected}, null, $get("ctl00_ContentPlaceHolder1_GuardianRepeater_ctl03_occupation"));
});

---

Okay, this still isn't going to work:

Code:

---

<&#37;= this.occupation.ClientID %>

---

occupation is the ID of the TextBox that you have placed in your ASPX markup within the Repeater element, as a result, the ClientID is going to be different for each instance of the TextBox within the repeater. Does that make sense?

Have a look at usage 3 again in the link that you posted.

You are going to have to use the DataBound event of the repeater, find each instance of the occupation TextBox within the Repeater item, and then grab the clientID. From there, edit the OnClientItemSelected attribute of the AutoComplete extender to include the ClientID of the TextBox, such as:

Code:

---

OnClientItemSelected="IAmSelected(clientID)"

---

And then refactor the IAmSelected method to take a parameter, which you then do the $get on.

Gary

thanks again,

i tried this:

Code:

---

Protected Sub GuardianRepeater_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.RepeaterItemEventArgs) Handles GuardianRepeater.ItemDataBound
        Dim t1 As TextBox = CType(e.Item.FindControl("occupation"), TextBox)
        Dim ace As AjaxControlToolkit.AutoCompleteExtender = CType(e.Item.FindControl("OccAutoCompleteExtender"), AjaxControlToolkit.AutoCompleteExtender)

        Const onClientClick As String = "IAmSelected('{0}')"

        If (Not t1 Is Nothing) And (Not ace Is Nothing) Then
            ace.OnClientItemSelected = String.Format(onClientClick, t1.ClientID)
        End If

    End Sub

---

i get an error saying "there is no source for the current location" on the red line. this is my javascript:

Code:

---

If Not (ClientScript.IsClientScriptBlockRegistered("MyScript")) Then
                ClientScript.RegisterClientScriptBlock(Me.GetType, "MyScript", "function IAmSelected( source, eventArgs, obj ) { alert($get(obj));}", True)
            End If

---

ok i dont get that error now. but once the page is about to load i get this error:

Code:

---

Microsoft JScript runtime error: Sys.ArgumentUndefinedException: Value cannot be undefined.
Parameter name: id

---

on a file called ScriptResource.axd. it's .Net generated code and looks like this:

Code:

---

var $get = Sys.UI.DomElement.getElementById = function Sys$UI$DomElement$getElementById(id, element) {
    /// <summary locid="M:J#Sys.UI.DomElement.getElementById" />
    /// <param name="id" type="String"></param>
    /// <param name="element" domElement="true" optional="true" mayBeNull="true"></param>
    /// <returns domElement="true" mayBeNull="true"></returns>
    var e = Function._validateParams(arguments, [
        {name: "id", type: String},
        {name: "element", mayBeNull: true, domElement: true, optional: true}
    ]);
    if (e) throw e;
    if (!element) return document.getElementById(id);
    if (element.getElementById) return element.getElementById(id);
    var nodeQueue = [];
    var childNodes = element.childNodes;
    for (var i = 0; i < childNodes.length; i++) {
        var node = childNodes[i];
        if (node.nodeType == 1) {
            nodeQueue[nodeQueue.length] = node;
        }
    }

---

Ok, so again, what is the source that is generated on the client?

There must be something wrong there before the $get method is failing.

Gary

here goes

1st one:

Code:

---

Sys.Application.add_init(function() {
    $create(AjaxControlToolkit.AutoCompleteBehavior, {"completionListCssClass":"autocomplete_list","completionListItemCssClass":"autocomplete_listItem","delimiterCharacters":"","highlightedItemCssClass":"autocomplete_highlighted_listitem","id":"ctl00_ContentPlaceHolder1_GuardianRepeater_ctl01_OccAutoCompleteExtender","minimumPrefixLength":2,"serviceMethod":"GetOccupations","servicePath":"ClService.asmx"}, {"itemSelected":IAmSelected('ctl00_ContentPlaceHolder1_GuardianRepeater_ctl01_occupation')}, null, $get("ctl00_ContentPlaceHolder1_GuardianRepeater_ctl01_occupation"));
});

---

2nd:

Code:

---

Sys.Application.add_init(function() {
    $create(AjaxControlToolkit.AutoCompleteBehavior, {"completionListCssClass":"autocomplete_list","completionListItemCssClass":"autocomplete_listItem","delimiterCharacters":"","highlightedItemCssClass":"autocomplete_highlighted_listitem","id":"ctl00_ContentPlaceHolder1_GuardianRepeater_ctl03_OccAutoCompleteExtender","minimumPrefixLength":2,"serviceMethod":"GetOccupations","servicePath":"ClService.asmx"}, {"itemSelected":IAmSelected('ctl00_ContentPlaceHolder1_GuardianRepeater_ctl03_occupation')}, null, $get("ctl00_ContentPlaceHolder1_GuardianRepeater_ctl03_occupation"));
});

---

and my javascript:

Code:

---

<script type="text/javascript">
//<![CDATA[
function IAmSelected( source, eventArgs,obj ) { alert($get(obj));}//]]>
</script>

---

Ok, so you are only passing in one parameter to the IAmSelected method, but your method is expecting two.

So that isn't going to work :)

Gary

hmmmmmm:confused:,

it gets 2 arguments from the autoextender. im passing the objectid as well. What am i missing?

Based on the code you have posted:

Code:

---

IAmSelected('ctl00_ContentPlaceHolder1_GuardianRepeater_ctl03_occupation')

---

The call only gets one argument past in.

Gary

ok, true, but this is what i read:

Code:

---

The Function being IAmSelected is added as an event handler to the ItemSelected event on the flyout of the ACE.

It gets the Arguments as are specified for the Eventhandlers of the ItemSelected Event in the AutoCompleteExtender's behaior.

---

before I wasn't passing parameters. It just unherited it. How can I get those values:(

Ok, I am going to have to go away and look at this properly from the start.

I will let you know if I get something.

Gary

This one bugged me a lot so I sat here and made a whole sample. I've reproduced the same conditions as you - a repeater, a hidden field, returning key-value from the service, and javascript to handle the click.

Let's start with the page. Default.aspx. You can make a new project and copy along, you too gep.

Code:

---

<&#37;@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication2._Default" %>
<%@ Register  Assembly="AjaxControlToolkit"  Namespace="AjaxControlToolkit"  TagPrefix="ajaxToolkit"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
   
    <script type="text/javascript">
        function IAmSelected(source, eventArgs) {
            //alert(source.get_id());
            alert(eval('hiddenFieldFor' + source.get_id()));

            document.getElementById(eval('hiddenFieldFor' + source.get_id())).value = eventArgs.get_value();
            alert(document.getElementById(eval('hiddenFieldFor' + source.get_id())).value);
           
          // alert(" Key : " + eventArgs.get_text() + "  Value :  " + eventArgs.get_value());
        }
       
       
       
    </script>
</head>
<body>



    <form id="form1" runat="server">
   

   
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <div>

        <asp:Repeater ID="Repeater1" runat="server"
            onitemdatabound="Repeater1_ItemDataBound" >
            <ItemTemplate>
           
                <asp:HiddenField ID="MyLovelyHiddenField" runat="server" />
           
                <asp:TextBox ID="textbox1" runat="server"></asp:TextBox>
                  <ajaxToolkit:AutoCompleteExtender
                  ID="OccAutoCompleteExtender"
                  TargetControlID="textbox1"
                  ServicePath="~/WebService1.asmx"
                  ServiceMethod="GetCompletionList"
                  MinimumPrefixLength="1"
                  CompletionInterval="500"
                  OnClientItemSelected="IAmSelected" 
                  runat="server" />

<br /><br />
            </ItemTemplate>
        </asp:Repeater>


   
    </div>
    </form>
</body>
</html>

---

(continued next post)

Default.aspx.cs

Code:

---

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using AjaxControlToolkit;
using System.Text;

namespace WebApplication2
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

            Repeater1.DataSource = "helloworld".ToCharArray();
            Repeater1.DataBind();
        }



        protected void Repeater1_ItemDataBound(object sender, RepeaterItemEventArgs e)
        {
            if (e.Item.ItemType == ListItemType.AlternatingItem || e.Item.ItemType == ListItemType.Item)
            {
                AutoCompleteExtender ace = e.Item.FindControl("OccAutoCompleteExtender") as AutoCompleteExtender;
                TextBox txt1 = e.Item.FindControl("textbox1") as TextBox;

                HiddenField hf1 = e.Item.FindControl("MyLovelyHiddenField") as HiddenField;

                ace.TargetControlID = txt1.ID;
                string hface = "var hiddenFieldFor" + ace.ClientID + " = '" + hf1.ClientID + "';";
                ClientScript.RegisterClientScriptBlock(this.GetType(), "correspondingfields"+hf1.ClientID, hface, true);
            }
        }
    }
}

---

(Ignore coding standards ;) )

(Continued next post)

WebService1.asmx.cs (copied from that link you posted)

Code:

---

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;

namespace WebApplication2
{
    /// <summary>
    /// Summary description for WebService1
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
    [System.Web.Script.Services.ScriptService]
    public class WebService1 : System.Web.Services.WebService
    {

        [WebMethod]

        public string[] GetCompletionList(string prefixText, int count)
        {

            if (count == 0)
            {

                count = 10;

            }

            if (prefixText.Equals("xyz"))
            {

                return new string[0];

            }

            Random random = new Random();

            List<string> items = new List<string>(count);

            for (int i = 0; i < count; i++)
            {

                char c1 = (char)random.Next(65, 90);

                char c2 = (char)random.Next(97, 122);

                char c3 = (char)random.Next(97, 122);

                items.Add(AjaxControlToolkit.AutoCompleteExtender.CreateAutoCompleteItem(prefixText + c1 + c2 + c3, i.ToString()));

            }

            return items.ToArray();

        }

    }
}

---

Right, so what I'm doing is dynamically creating a 'corresponding' variable for javascript to pick up on. Your client method from the ACE is very limited. It can only do so much, so you have to sort of 'cheat'.

Run the page and it should work, and do a view source, you'll see...

Code:

---


<script type="text/javascript">
//<![CDATA[
var hiddenFieldForRepeater1_ctl00_OccAutoCompleteExtender = 'Repeater1_ctl00_MyLovelyHiddenField';var hiddenFieldForRepeater1_ctl01_OccAutoCompleteExtender = 'Repeater1_ctl01_MyLovelyHiddenField';var hiddenFieldForRepeater1_ctl02_OccAutoCompleteExtender = 'Repeater1_ctl02_MyLovelyHiddenField';var hiddenFieldForRepeater1_ctl03_OccAutoCompleteExtender = 'Repeater1_ctl03_MyLovelyHiddenField';var hiddenFieldForRepeater1_ctl04_OccAutoCompleteExtender = 'Repeater1_ctl04_MyLovelyHiddenField';var hiddenFieldForRepeater1_ctl05_OccAutoCompleteExtender = 'Repeater1_ctl05_MyLovelyHiddenField';var hiddenFieldForRepeater1_ctl06_OccAutoCompleteExtender = 'Repeater1_ctl06_MyLovelyHiddenField';var hiddenFieldForRepeater1_ctl07_OccAutoCompleteExtender = 'Repeater1_ctl07_MyLovelyHiddenField';var hiddenFieldForRepeater1_ctl08_OccAutoCompleteExtender = 'Repeater1_ctl08_MyLovelyHiddenField';var hiddenFieldForRepeater1_ctl09_OccAutoCompleteExtender = 'Repeater1_ctl09_MyLovelyHiddenField';//]]>
</script>

---

We know what the ACE's ID is going to be in the client event, so we can 'figure out' the variable name by prefixing 'hiddenfieldfor' and then looking at that corresponding string value.

Get it? So that was probably all you needed but it was quite confusing.

Grrrr, that is exactly what I was going to do at the weekend when I got a minute :)

Well, you'd have been better off, it took me 10 minutes :p

wow. thanks guys. i really appreciate this;). sorry for the late reply. i'm off sick at the moment:(. will try on monday when i'm back at work.:wave:

That's the best reason you could come up with for being away from code? :p

Hope it's not swine flu!!

Hi guys,

hope it wasn't swine flu:eek2:.

mendhak, you are a master:afrog:. Thank you so much for your time and effort. your code works perfectly. thanks also to gep13 for helping and not letting me give up. much appreciated. :wave:

Hey,

Glad to hear that you got it working, and that you are feeling better.

Gary

one more thing guys. sorry. say for example I select an option from the list, example programmer, and my hiddenfield now has an id of 2. then I type in TestOccupation. Since this occupation does not exist, I need to set the hiddenfield to -1. Then in my save routine, if it is -1, i will make a new entry into the occupation table.

What's the best way to do this?

If the user selects something from the autocomplete list, you'll have a value in your hidden field. If the user types their own thing in, there'll be nothing in the hidden field... you can use that as a 'guide'. If the hidden field is empty, it's a new item.

Or, handle the textbox's onchange... and populate the hidden field.

Code:

---

If the user selects something from the autocomplete list, you'll have a value in your hidden field

---

true. but if i select something. delete it, and then type something different, the wrong id is in there.

In which case, you are going to have to handle the textbox's onchange event, to handle this situation.

Gary

thanks again gep13

guys, im a bit stuck. please help.

i added this code to the repeater_ItemDataBound event, but now i'm not sure how to set the corresponding hiddenfield value to -1.

Code:

---

            Dim txtocc As TextBox = CType(e.Item.FindControl("Occupation"), TextBox)

            txtocc.Attributes.Add("onchange", "OccChanged();")

---

i almost got it:

Code:

---

            txtocc.Attributes.Add("onchange", "OccChanged(this);")

---

javascript:

Code:

---

function OccChanged(obj)
{

alert(obj.id);
 document.getElementById(eval('hiddenFieldFor' + obj.id)).value = -1
 alert(document.getElementById(eval('hiddenFieldFor' + obj.id)).value);
           
}

---

please help

If the user starts typing and then leaves the textbox, that fires the onchange. Now in the onchange, you don't really know whether the user selected something from the ACE or not. You can't look at the hidden field either - the hidden field might have been set previously. You can't make another hidden field for 'custom' text either because you won't know which one to take values from. Let's say you have hiddenField9 and hiddenFieldCustom9. In the ACE's click event, you can erase both hiddenFields and populate hiddenField9. But you're trying to cater to custom occupations. So user types in goatsmasher. In the onchange, you can't clear the other hidden field because onchange will be fired for either scenario.

You can't use onkeypress either - the user could see the ACE and type exactly what's in there and ignore it. You'll end up with duplicate custom occupations.

Instead, you'll need to go back to what we talked about originally - forget the ID coming back from the service. Don't rely on the ACE, use it to make the experience better.

When it's time to read from the textboxes, look at the text in the textbox, not a hidden field. Peform a lookup against the database, passing the string in and finding its ID. If there's no ID, then it's a brand new field, so add it.

thanks mendhak. i will go with your suggestion;)

All our effort for nothing :cry: :p

It was still fun though :D