阿贾克斯AutoCompleteExtender - 造型个别项目？(Ajax AutoCompl

2019-09-22 17:26发布

站内文章 / 前端开发
56 0 0

简洁版本：

我想知道我怎么可以改变由autocompleteextender产生的个别项目的css样式，但控制只允许我设置的所有项目组的造型。

龙版本：

我有利用了AutoCompleteExtender一个搜索框。 在键入时，搜索结果中的搜索框下一个框弹出。 

<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" /

该AutoCompleteExtender必须指定一个CSS类每一个项目，一个属性CompletionListItemCssClass和CompletionListHighlightedItemCssClass高亮显示项目。 我想知道的是我怎么能单独样式基于特定标准的具体项目。

在我的服务，我运行一个存储过程，处理结果了一下，然后返回一个字符串数组回autocompleteextender。 我有一个存储过程设置为包括与每个记录一定的标志。我想使用该标志来突出搜索结果（转文本显示为红色，例如）的某些行。

我怎样才能做到这一点？ 我似乎无法找到任何方式来访问单个项目来改变自己的风格。

我一直在寻找帮助，一切都结束了我来了两手空空。 谢谢。

Answer 1:

这种行为是默认情况下不支持，但你可以调整AutoCompleteExtender源添加此功能。 其实有两种方式可供选择：第一种是扩大对象，返回从对项目的CSS类新的房地产服务到延长并应用在扩展客户端脚本这个属性值。 而第二个可用的方法是为项目创造引进新的事件，处理一下页面上，根据其价值的项目应用自定义逻辑。 让我们在这里实现了这两种方法。 在首先你需要下载AjaxControlToolkit源，如果你没有这个尚未开放的Client/MicrosoftAjax.Extended/AutoComplete/AutoCompleteBehavior.pre.js文件。 在这个文件中，你需要改变_update如下方法： 

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

如果你不打算实施新的客户端事件的情况，这是在项目中，您需要的所有更改。 你已经可以通过从Web服务器的方法项的CSS类项目的文本和值一起。 唯一的区别是使用自定义类，而不是在默认情况下在AjaxControlToolkit控制使用一对： 

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

如果你想还实现自定义客户端事件（也确实给予更大的灵活性），那么你需要更多的代码添加到AutoCompleteBehavior.pre.js文件。 添加下面Sys.Extended.UI.AutoCompleteBehavior.prototype对象某处的代码： 

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

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

此外，打开Server/AjaxControlToolkit/AutoComplete/AutoCompleteExtender.cs文件，这个属性添加到AutoCompleteExtender类： 

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

重建项目后，您可以使用自定义AjaxControlToolkit组件的附加功能。 

<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">


文章来源: Ajax AutoCompleteExtender — styling individual items?
标签： asp.net ajax ajaxcontroltoolkit
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~