Ajax AutoCompleteExtender — styling individual ite

Question

Short version:

I want to know how I can change the css style of individual items generated by an autocompleteextender, but the control only allows me to set the styling of all items as a group.

Long version:

I have a search box that utilizes an AutoCompleteExtender. As you type, search results pop up in a box under the search box.

<asp:TextBox ID="txtSearch" OnChange="javascript: Changed(this);"  runat="server" style="width:360px;" />
<cc1:AutoCompleteExtender ID="Search_AutoCompleteExtender" runat="server" 
                    BehaviorID="Search_AutoCompleteExtender"
                    MinimumPrefixLength="3" 
                    DelimiterCharacters="" 
                    Enabled="True" 
                    ServicePath="~/Services/Search.asmx" 
                    ServiceMethod="GetResults"
                    TargetControlID="txtSearch"
                    FirstRowSelected="true"
                    CompletionListItemCssClass="AutoExtenderList"
                    CompletionListHighlightedItemCssClass="AutoExtenderHighlight"
                    CompletionInterval="1" 
                    EnableCaching="false"
                    CompletionSetCount="20"
                    CompletionListElementID="autocompleteDropDownPanel1" />

<asp:Panel ID="autocompleteDropDownPanel1" runat="server" ScrollBars="Vertical" Height="250" style="overflow-y:scroll;position:absolute;left:0;top:0" /

The AutoCompleteExtender has a property to assign a CSS class to every item, CompletionListItemCssClass and CompletionListHighlightedItemCssClass for the highlighted item. What I want to know is how I can individually style specific items based on certain criteria.

In my service, I'm running a stored procedure, manipulating the results a bit, then returning a string array back to the autocompleteextender. I have that stored procedure set up to include a certain flag with each record.. I want to use that flag to highlight certain rows of the search results (turn the text red, for example).

How can I do this? I can't seem to find any way to access individual items to change their styling.

I've been searching all over for help and am coming up empty handed. Thank you.

Answer 1

Such behavior isn't supported by default but you can tweak AutoCompleteExtender sources to add this feature. Actually there are two ways available: the first one is to extend object, returned to extender from web service with new property for item css class and apply this property value in extender client script. And the second available approach is to introduce new event for item creating, handle it on page and apply custom logic on item depending on it value. Let's implement both approaches here. At the first you need to download AjaxControlToolkit sources if you didn't this yet and open Client/MicrosoftAjax.Extended/AutoComplete/AutoCompleteBehavior.pre.js file. In this file you need to change the _update method as below:

_update: function (prefixText, completionItems, cacheResults) {
    /// <summary>
    /// Method to update the status of the autocomplete behavior
    /// </summary>
    /// <param name="prefixText" type="String" DomElement="false" mayBeNull="true" />
    /// <param name="completionItems" type="Object" DomElement="false" mayBeNull="true" />
    /// <param name="cacheResults" type="Object" DomElement="false" mayBeNull="true" />
    /// <returns />       
    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 cssClass = null;
        var dataItem = null;

        //remove this line if you don't need to implement itemDataBinding event
        var itemDataBindingHandler = this.get_events().getHandler('itemDataBinding');

        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 {
                dataItem = Sys.Serialization.JavaScriptSerializer.deserialize( completionItems[i] );
                if (dataItem && dataItem.First) {
                    // Use the text and value pair returned from the web service
                    text = dataItem.First;
                    value = dataItem.Second;

                    if (dataItem.CssClass) {
                        cssClass = dataItem.CssClass;
                    }
                }
                else {
                    // If the web service only returned a regular string, use it for
                    // both the text and the value
                    text = completionItems[i];
                    value = text;
                }
            } catch (ex) {
                text = completionItems[i];
                value = completionItems[i];
            }


            // Set the text/value for the item
            // ShowOnlyCurrentWordInCompletionListItem support
            var optionText = this._showOnlyCurrentWordInCompletionListItem ? text : this._getTextWithInsertedWord(text);
            itemElement.appendChild(document.createTextNode(optionText));
            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;
                }
            }

            if (cssClass) {
                Sys.UI.DomElement.addCssClass(itemElement, cssClass);   
            }

            //remove this if you don't need to implement itemDataBinding event
            if (itemDataBindingHandler) {
                itemDataBindingHandler(itemElement, dataItem || completionItems[i]);
            }

            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();
    }
}

If you not intended to implement scenario with new client-side event this is all changes in project you required. You already can pass item css class from web server method along with item's text and value. Only difference is to use custom class instead of the Pair that used in AjaxControlToolkit control by default:

[WebMethod]
public string[] GetCompletionList(string prefixText, int count)
{
    var serializer = new JavaScriptSerializer();
    var items = Enumerable.Range(1, count)
        .Select(id => serializer.Serialize(
                        new
                        {
                            Second = id,
                            First = prefixText + "_" + Guid.NewGuid().ToString(),
                            CssClass = id % 2 == 0 ? "even" : "odd"
                        }));


    return items.ToArray();
}

IF you want to implement also custom client event (that give more flexibility indeed) then you need to add some more code to the AutoCompleteBehavior.pre.js file. Add code below somewhere in Sys.Extended.UI.AutoCompleteBehavior.prototype object:

add_itemDataBinding: function (handler) {
    this.get_events().addHandler('itemDataBinding', handler);
},

remove_itemDataBinding: function (handler) {
    this.get_events().removeHandler('itemDataBinding', handler);
},

Also, open the Server/AjaxControlToolkit/AutoComplete/AutoCompleteExtender.cs file and add this property to the AutoCompleteExtender class:

/// <summary>
/// Handler to attach to the client-side item data binding event
/// </summary>
[DefaultValue("")]
[ExtenderControlEvent]
[ClientPropertyName("itemDataBinding")]
public string OnClientItemDataBinding
{
    get { return GetPropertyValue("OnClientItemDataBinding", string.Empty); }
    set { SetPropertyValue("OnClientItemDataBinding", value); }
}

After rebuilding project you can use custom AjaxControlToolkit assembly with additional functionality.

<script type="text/javascript">
    function itemDataBinding(item, dataItem) {
        var value = parseInt(dataItem.Second, 10);
        if (!isNaN(value)) {
            item.className = value % 2 == 0 ? "even" : "odd";
        }
    }
</script>

<ajaxToolkit:AutoCompleteExtender runat="server" ID="autoComplete1" 
    TargetControlID="myTextBox" ServicePath="AutoComplete.asmx" ServiceMethod="GetCompletionList" 
    OnClientItemDataBinding="itemDataBinding">