简短版：
我想知道如何更改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具有一个属性，可以为突出显示的项目的每个项CompletionListItemCssClass和CompletionListHighlightedItemCssClass分配一个CSS类。我想知道的是我如何根据特定标准单独设置特定项目的样式。
在我的服务中，我正在运行一个存储过程，稍微操作一下结果，然后将一个字符串数组返回给autocompleteextender。我将该存储过程设置为包含每个记录的某个标志..我想使用该标志突出显示搜索结果的某些行（例如，将文本变为红色）。
我该怎么做？我似乎找不到任何方法来访问单个项目来改变他们的样式。
我一直在寻求帮助，我空手而归。谢谢。
答案 0 :(得分：3)
默认情况下不支持此类行为，但您可以调整AutoCompleteExtender源以添加此功能。实际上有两种方法可用：第一种方法是扩展对象，使用项目css类的新属性从Web服务返回到扩展程序，并在扩展程序客户端脚本中应用此属性值。第二种可用方法是为项目创建引入新事件，在页面上处理它并根据项目值对项目应用自定义逻辑。我们在这里实现两种方法。首先，如果您还没有下载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控件中使用的Pair：
[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">