Hi All,

I want to use autoComplete extender in a way similar to a dropDownList.
Currently I have a dropdown List that holds a collection of companies. Selecting a company name enables me to get the value associated with the listItem.

I want to replace the dropDownList with autocomplete extender and place a text box. While typing user will be able to view the company. After selecting the company, I want to capture the value (such as company ID). I don't want this ID to be visible to user.

Please advice how to achieve this functionality with autoComplete extender.

rgds

 Anuj 

Hi Anuj,

 Right now , the ACE does not support Key-Value pairs.

 There is a work-item for this over at codeplex , you could vote for it over there:

AutoComplete - key value

Hope this helps

Hi Anuj,

 The patch made it to the release code .

You can download the patch from here : http://www.codeplex.com/AtlasControlToolkit/SourceControl/ListDownloadableCommits.aspx

Look for changeset : 24539

Hope this helps

Could you provide us with a usage example?

Hi,

 The usage example is outlined here :

http://blogs.MSDN.com/phaniraj/archive/2007/06/19/how-to-use-a-key-value-pair-in-your-autocompleteextender.aspx

Hope this helps

It does help! Thanks :) 

Hay,

I have downloaded the latest AjaxControlKit changeset with number (at that time) 24719 and added a small bit of code, just to make life a little easier ;-). With this piece of code you just specify the ID of a hidden field that holds the key value.

AutoCompleteExtender.cs
1. Added property to the class AutoCompleteExtender:

 [DefaultValue("")]
 [ExtenderControlProperty]
 [IDReferenceProperty(typeof(HiddenField))]
 [ClientPropertyName("keyHiddenFieldID")]
 public string KeyHiddenFieldID
 {
  get { return GetPropertyValue("KeyHiddenFieldID", ""); }
  set { SetPropertyValue("KeyHiddenFieldID", value); }
 }

AutoCompleteExtender.js
1. Added field to the class AjaxControlToolkit.AutoCompleteBehavior:

    this._keyHiddenFieldID = null;

2. Added property to the class AjaxControlToolkit.AutoCompleteBehavior.prototype:

    get_keyHiddenFieldID: function() {
        /// <value type="String" maybeNull="true">
        /// ID of the hidden field control that holds the key value of the selected key-pair item.
        /// </value>
        return this._keyHiddenFieldID;
    },
    set_keyHiddenFieldID: function(value) {
        if (this._keyHiddenFieldID != value) {
            this._keyHiddenFieldID = value;
            this.raisePropertyChanged('keyHiddenFieldID');
        }
    },

3. Added code to the eventhandler onKeyDown where the tab is processed:

    _onKeyDown: function(ev) {
  ...
        else if (k === Sys.UI.Key.tab) {
            if (this._selectIndex !== -1) {
                this._setText(this._completionListElement.childNodes[this._selectIndex]);
            }
   if (this._useKeyValuePairs) {
    var keyControl = $get(this._keyHiddenFieldID);
    if (keyControl) {
     keyControl.value == null;
    }            
            }
        }
  ...
    },

4. Added code to the eventhandler setText:

    _setText: function(item) {
  ...
        if (this._useKeyValuePairs) {
            var keyControl = $get(this._keyHiddenFieldID);
            if (keyControl) {
    keyControl.value = (item ? item._value : null);
   }   
            this.raiseItemSelected(new AjaxControlToolkit.AutoCompleteItemEventArgs(item, text, item ? item._value : null));
        } else {
            this.raiseItemSelected(new AjaxControlToolkit.AutoCompleteItemEventArgs(item, text));
        }
  ...
    },

With kind regards,

Dennis

 Dennis, after adding your code I get a Javascript error (in IE only) saying that 'type is undefined', the following is the code around where the error occurs.

 var $create = Sys.Component.create = function Sys$Component$create(type, properties, events, references, element) {
    /// <param name="type" type="Type"></param>
    /// <param name="properties" optional="true" mayBeNull="true"></param>
    /// <param name="events" optional="true" mayBeNull="true"></param>
    /// <param name="references" optional="true" mayBeNull="true"></param>
    /// <param name="element" domElement="true" optional="true" mayBeNull="true"></param>
    /// <returns type="Sys.UI.Component"></returns>
    var e = Function._validateParams(arguments, [
        {name: "type", type: Type},
        {name: "properties", mayBeNull: true, optional: true}, <-- Tells me that the object it's trying to build is an AutoComleteExtender.
        {name: "events", mayBeNull: true, optional: true},
        {name: "references", mayBeNull: true, optional: true},
        {name: "element", mayBeNull: true, domElement: true, optional: true}
    ]);
    if (e) throw e; <-- Dies here
 

 What I did not mentioned is that I have downloaded the latest AjaxControlKit changeset with number (at that time) 24719. Then added these changes to that changeset.

With kind regards,

Dennis

is this available in build 10920?

wat is the usage? i can't find UseKeyValuePair attribute

Hello,

A similar question is posted as a workitem , please check out the thread :http://www.codeplex.com/AtlasControlToolkit/WorkItem/View.aspx?WorkItemId=12910

Hope this helps

i'm working on the key pair value issue.