AJAX Toolkit Extender IMP

///

/// Create a serialized JSON object representing a text/value pair that can
/// be returned by the webservice.
///

/// Text
/// Value
/// The html markup to be rendered
/// serialized JSON object representing the text/value/html tuple
public static string CreateAutoCompleteItem(string text, string value, string markup)
{
return new JavaScriptSerializer().Serialize(new Pair(text, new Pair(value, markup)));
}


Javascript Functions (_setText and _update)

_setText: function(item) {
///

/// Method to set the selected autocomplete option on the textbox
///

///
/// Item to select
///
///

var realItem = item;
var text = null;

do
{
if(realItem._text !== undefined) {
text = realItem._text;
}
else {
realItem = realItem.parentNode;
}
}
while(text == null)

//var text = (item && item.firstChild) ? item.firstChild.nodeValue : null;
this._timer.set_enabled(false);

var element = this.get_element();
var control = element.control;
if (control && control.set_text) {
control.set_text(text);
$common.tryFireEvent(control, "change");
}
else {
element.value = text;
$common.tryFireEvent(element, "change");
}
this.raiseItemSelected(new AjaxControlToolkit.AutoCompleteItemEventArgs(item, text, realItem ? realItem._value : null));

this._currentPrefix = this._currentCompletionWord();
this._hideCompletionList();
},

_update: function(prefixText, completionItems, cacheResults) {
///

/// Method to update the status of the autocomplete behavior
///

///
///
///
///
if (cacheResults && this.get_enableCaching()) {
if (!this._cache) {
this._cache = {};
}
this._cache[prefixText] = completionItems;
}

// If the target control loses focus or
// if the value in textbox has changed before the webservice returned
// completion items we don't need to show popup
if ((!this._textBoxHasFocus) || (prefixText != this._currentCompletionWord())) {
this._hideCompletionList();
return;
}

if (completionItems && completionItems.length) {
this._completionListElement.innerHTML = '';
this._selectIndex = -1;
var _firstChild = null;
var text = null;
var value = null;
var markup = null;

for (var i = 0; i < completionItems.length; i++) {
// Create the item
var itemElement = null;
if (this._completionListElementID) {
// the completion element has been created by the user and li won't necessarily work
itemElement = document.createElement('div');
} else {
itemElement = document.createElement('li');
}

// set the first child if it is null
if( _firstChild == null ){
_firstChild = itemElement;
}

// Get the text/value for the item
try {
var pair = Sys.Serialization.JavaScriptSerializer.deserialize('(' + completionItems[i] + ')');
if(pair && pair.First && pair.Second.First) {
text = pair.First;
value = pair.Second.First;
markup = pair.Second.Second;
}
else if (pair && pair.First) {
// Use the text and value pair returned from the web service
text = pair.First;
value = pair.Second;
markup = null;
} else {
// If the web service only returned a regular string, use it for
// both the text and the value
text = pair;
value = pair;
markup = null;
}
} catch (ex) {
text = completionItems[i];
value = completionItems[i];
markup = null;
}

if(markup == null) {
// Set the text/value for the item
itemElement.appendChild(document.createTextNode(this._getTextWithInsertedWord(text)));
}
else {
var element = document.createElement("div");
element.innerHTML = markup;
itemElement.appendChild(element);
}
itemElement._text = text;
itemElement._value = value;
itemElement.__item = '';

if (this._completionListItemCssClass) {
Sys.UI.DomElement.addCssClass(itemElement, this._completionListItemCssClass);
} else {
var itemElementStyle = itemElement.style;
itemElementStyle.padding = '0px';
itemElementStyle.textAlign = 'left';
itemElementStyle.textOverflow = 'ellipsis';
// workaround for safari since normal colors do not
// show well there.
if (Sys.Browser.agent === Sys.Browser.Safari) {
itemElementStyle.backgroundColor = 'white';
itemElementStyle.color = 'black';
} else {
itemElementStyle.backgroundColor = this._textBackground;
itemElementStyle.color = this._textColor;
}
}
this._completionListElement.appendChild(itemElement);
}
var elementBounds = $common.getBounds(this.get_element());
this._completionListElement.style.width = Math.max(1, elementBounds.width - 2) + 'px';
this._completionListElement.scrollTop = 0;

this.raisePopulated(Sys.EventArgs.Empty);

var eventArgs = new Sys.CancelEventArgs();
this.raiseShowing(eventArgs);
if (!eventArgs.get_cancel()) {
this.showPopup();
// Check if the first Row is to be selected by default and if yes highlight it and updated selectIndex.
if (this._firstRowSelected && (_firstChild != null)) {
this._highlightItem( _firstChild );
this._selectIndex = 0;
}
}
} else {
this._hideCompletionList();
}
},