阿贾克斯AutoCompleteExtender - 造型不同的物品？ [英] Ajax AutoCompleteExtender -- styling individual items?
问题描述
短版：
我想知道我可以改变由autocompleteextender产生的个别项目的css样式，但控制只允许我设置的所有项目作为一个整体的造型。
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.
龙版本：
我有利用一个AutoCompleteExtender一个搜索框。在键入时，搜索结果弹出搜索框下一个框。
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" /
该AutoCompleteExtender有一个属性到CSS类分配给每一个项目， CompletionListItemCssClass 和 CompletionListHighlightedItemCssClass 高亮显示项目。我想知道的是如何根据一定的标准，我可以单独样式的具体项目。
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.
在我的服务，我运行一个存储过程，处理结果了一下，然后返回一个字符串数组回autocompleteextender。我有一个存储过程设置为包括一定的标志，每个记录。我想使用该标志来突出某些行的搜索结果（转文本显示为红色，例如）。
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.
推荐答案
不支持这种行为，在默认情况下，但你可以调整AutoCompleteExtender源添加此功能。其实有两种方式可供选择：第一种是扩大对象，返回从与项目CSS类新的房地产服务，以扩展器和适用于扩展客户端脚本这个属性值。而第二个可用的方法是引入新的事件项创建，处理一下页面上取决于它的价值应用自定义逻辑上的项目。让我们在这里实现了这两种方法。在第一个，你需要下载源AjaxControlToolkit中，如果你没有这个尚未开放的客户端/ MicrosoftAjax.Extended /自动完成/ AutoCompleteBehavior。pre.js 文件。在这个文件中，你需要更改 _Update 如下方法：
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();
}
}
如果您不打算实施方案中与新的客户端事件，这是在项目，你需要的所有更改。你已经可以通过从Web服务器的方法项的CSS类以及项目的文本和值。唯一的区别是使用在使用AjaxControlToolkit中控制默认情况下，对自定义类，而不是：
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();
}
如果你想还实现自定义客户端事件（即给予更大的灵活性确实）
那么你需要添加一些code到AutoCompleteBehavior。pre.js文件。添加code以下的地方在Sys.Extended.UI.AutoCompleteBehavior.prototype对象：
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);
},
此外，打开服务器/ AjaxControlToolkit中/自动完成/ AutoCompleteExtender.cs 文件，该属性添加到AutoCompleteExtender类：
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); }
}
在重建项目中，你可以使用自定义组件AjaxControlToolkit中具有更多的功能。
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">
这篇关于阿贾克斯AutoCompleteExtender - 造型不同的物品？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
