默认情况下,AutoCompleteExtender显示的结果来自于文本框中输入的全部值,这里我的实现,它可以去搜索文本框中多于一个的单词,它们之间用逗号分割(或者别的符号),任何时间输入逗号,将会显示一个新的建议下拉列表。AutoCompleteExtender并不支持这种类型的列表,我们将通过一些修改来实现这些属性。[英文原文来自于CodeProject]
主要内容
1.简介
2.继承AutoCompleteProperties
3.继承AutoCompleteExtender
4.实现自定义的AutoCompleteBehavior
5.测试
默认情况下,AutoCompleteExtender显示的结果来自于文本框中输入的全部值,这里我的实现,它可以去搜索文本框中多于一个的单词,它们之间用逗号分割(或者别的符号),任何时间输入逗号,将会显示一个新的建议下拉列表。AutoCompleteExtender并不支持这种类型的列表,我们将通过一些修改来实现这些属性。[英文原文来自于CodeProject]
主要内容
1.简介
2.继承AutoCompleteProperties
3.继承AutoCompleteExtender
4.实现自定义的AutoCompleteBehavior
5.测试
简介
默认情况下,AutoCompleteExtender显示的结果来自于文本框中输入的全部值,这里我的实现,它可以去搜索文本框中多于一个的单词,它们之间用逗号分割(或者别的符号),任何时间输入逗号,将会显示一个新的建议下拉列表。AutoCompleteExtender并不支持这种类型的列表,我们将通过一些修改来实现这些属性。
继承AutoCompleteProperties
第一步为新控件CustomAutoCompleteExtender创建C#类,我们将定义一个继承于AutoCompleteProperties的类CustomAutoCompleteProperties,并添加多单词建议支持和CSS样式属性,为了实现多单词建议,我们需要一个属性SeparatorChar,通过该属性,我们可以拆分成一个一个的单词并为最新输入的单词打开建议列表。
namespace CustomAtlas.Controls
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
public class CustomAutoCompleteProperties : AutoCompleteProperties
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
public string SeparatorChar
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
get
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
object obj = base.ViewState["SeparatorChar"];
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
if (obj != null) return (string)obj;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
else return ",";
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
set
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
base.ViewState["SeparatorChar"] = value;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
base.OnChanged(EventArgs.Empty);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
public string CssList
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
get
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
object obj = base.ViewState["CssList"];
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
if (obj != null) return (string)obj;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
else return String.Empty;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
set
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
base.ViewState["CssList"] = value;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
base.OnChanged(EventArgs.Empty);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
public string CssItem
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
get
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
object obj = base.ViewState["CssItem"];
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
if (obj != null) return (string)obj;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
else return String.Empty;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
set
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
base.ViewState["CssItem"] = value;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
base.OnChanged(EventArgs.Empty);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
public string CssHoverItem
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
get
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
object obj = base.ViewState["CssHoverItem"];
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
if (obj != null) return (string)obj;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
else return String.Empty;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
set
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
base.ViewState["CssHoverItem"] = value;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
base.OnChanged(EventArgs.Empty);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
CssList, CssItem和CssHoverItem需要构建控件的样式,CssList提供用来画下拉列表,CssItem和CssHoverItem用来画列表中的每一项。
继承AutoCompleteExtender
完成了第一步,我们继续实现Extender,在这里我们需要从AutoCompleteExtender继承并为控件添加新的属性。
namespace CustomAtlas.Controls
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
public class CustomAutoCompleteExtender : AutoCompleteExtender
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
protected override void RenderScript(Microsoft.Web.Script.ScriptTextWriter writer, Control targetControl)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
// get our CustomAutoCompleteProperties
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
CustomAutoCompleteProperties cacp = (CustomAutoCompleteProperties) base.GetTargetProperties(targetControl);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
if ((cacp != null) && cacp.Enabled)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
// check if the ServicePath is set
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
string _ServicePath = cacp.ServicePath;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
if (_ServicePath == String.Empty)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
_ServicePath = this.ServicePath;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
if (_ServicePath == String.Empty)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
throw new InvalidOperationException("The ServicePath must be set for AutoCompleteBehavior");
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
// check if the ServiceMethod is set
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
string _ServiceMethod = cacp.ServiceMethod;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
if (_ServiceMethod == String.Empty)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
_ServiceMethod = this.ServiceMethod;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
if (_ServiceMethod == String.Empty)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
throw new InvalidOperationException("The ServiceMethod must be set for AutoCompleteBehavior");
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
// search for the completion list control if an ID was supplied
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
Control c = null;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
string drp = this.DropDownPanelID;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
if (drp != String.Empty)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
c = this.NamingContainer.FindControl(drp);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
if (c == null)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
throw new InvalidOperationException("The specified DropDownPanelID is not a valid ID");
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
// write the Atlas markup on page
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
writer.WriteStartElement("autoComplete");
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
writer.WriteAttributeString("serviceURL", base.ResolveClientUrl(_ServicePath));
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
writer.WriteAttributeString("serviceMethod", _ServiceMethod);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
if (c != null) writer.WriteAttributeString("completionList", c.ClientID);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
writer.WriteAttributeString("minimumPrefixLength", cacp.MinimumPrefixLength.ToString());
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
writer.WriteAttributeString("separatorChar", cacp.SeparatorChar);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
writer.WriteAttributeString("cssList", cacp.CssList);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
writer.WriteAttributeString("cssItem", cacp.CssItem);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
writer.WriteAttributeString("cssHoverItem", cacp.CssHoverItem);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
writer.WriteEndElement();
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
实现自定义的AutoCompleteBehavior
现在控件已经完成,我们只剩下管理客户端代码以发送正确的值到WebService并提供我们自定义的CSS样式。在Atlas.js中查找到AutoCompleteBehavior,我们可以拷贝到这里并注册我们自己的类。
ype.registerNamespace('Custom.UI');
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
Custom.UI.AutoCompleteBehavior = function()
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
Custom.UI.AutoCompleteBehavior.initializeBase(this);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
var _appURL;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
var _serviceURL;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
var _serviceMethod;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
var _separatorChar = ',';
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
var _minimumPrefixLength = 3;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
var _cssList;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
var _cssItem;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
var _cssHoverItem;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
var _completionSetCount = 10;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
var _completionInterval = 1000;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
var _completionListElement;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
var _popupBehavior;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
var _timer;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
var _cache;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
var _currentPrefix;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
var _selectIndex;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
var _focusHandler;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
var _blurHandler;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
var _keyDownHandler;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
var _mouseDownHandler;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
var _mouseUpHandler;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
var _mouseOverHandler;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
var _tickHandler;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.get_appURL = function()
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
return _appURL;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.set_appURL = function(value)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
_appURL = value;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.get_completionInterval = function()
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
return _completionInterval;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.set_completionInterval = function(value)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
_completionInterval = value;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.get_completionList = function()
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
return _completionListElement;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.set_completionList = function(value)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
_completionListElement = value;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.get_completionSetCount = function()
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
return _completionSetCount;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.set_completionSetCount = function(value)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
_completionSetCount = value;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.get_minimumPrefixLength = function()
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
return _minimumPrefixLength;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.set_minimumPrefixLength = function(value)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
_minimumPrefixLength = value;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.get_separatorChar = function()
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
return _separatorChar;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.set_separatorChar = function(value)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
_separatorChar = value;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.get_serviceMethod = function()
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
return _serviceMethod;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.set_serviceMethod = function(value)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
_serviceMethod = value;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.get_serviceURL = function()
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
return _serviceURL;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.set_serviceURL = function(value)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
_serviceURL = value;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
/**//* styles */
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.get_cssList = function()
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
return _cssList;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.set_cssList = function(value)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
_cssList = value;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.get_cssItem = function()
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
return _cssItem;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.set_cssItem = function(value)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
_cssItem = value;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.get_cssHoverItem = function()
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
return _cssHoverItem;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.set_cssHoverItem = function(value)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
_cssHoverItem = value;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.dispose = function()
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (_timer)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
_timer.tick.remove(_tickHandler);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
_timer.dispose();
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
var element = this.control.element;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
element.detachEvent('onfocus', _focusHandler);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
element.detachEvent('onblur', _blurHandler);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
element.detachEvent('onkeydown', _keyDownHandler);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
_completionListElement.detachEvent('onmousedown', _mouseDownHandler);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
_completionListElement.detachEvent('onmouseup', _mouseUpHandler);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
_completionListElement.detachEvent('onmouseover', _mouseOverHandler);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
_tickHandler = null;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
_focusHandler = null;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
_blurHandler = null;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
_keyDownHandler = null;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
_mouseDownHandler = null;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
_mouseUpHandler = null;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
_mouseOverHandler = null;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
Sys.UI.AutoCompleteBehavior.callBaseMethod(this, 'dispose');
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.getDescriptor = function()
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
var td = Custom.UI.AutoCompleteBehavior.callBaseMethod(this, 'getDescriptor');
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
td.addProperty('completionInterval', Number);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
td.addProperty('completionList', Object, false, Sys.Attributes.Element, true);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
td.addProperty('completionSetCount', Number);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
td.addProperty('minimumPrefixLength', Number);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
td.addProperty('separatorChar', String);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
td.addProperty('cssList', String);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
td.addProperty('cssItem', String);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
td.addProperty('cssHoverItem', String);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
td.addProperty('serviceMethod', String);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
td.addProperty('serviceURL', String);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
td.addProperty('appURL', String);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
return td;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.initialize = function()
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
Custom.UI.AutoCompleteBehavior.callBaseMethod(this, 'initialize');
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
_tickHandler = Function.createDelegate(this, this._onTimerTick);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
_focusHandler = Function.createDelegate(this, this._onGotFocus);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
_blurHandler = Function.createDelegate(this, this._onLostFocus);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
_keyDownHandler = Function.createDelegate(this, this._onKeyDown);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
_mouseDownHandler = Function.createDelegate(this, this._onListMouseDown);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
_mouseUpHandler = Function.createDelegate(this, this._onListMouseUp);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
_mouseOverHandler = Function.createDelegate(this, this._onListMouseOver);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
_timer = new Sys.Timer();
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
_timer.set_interval(_completionInterval);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
_timer.tick.add(_tickHandler);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
var element = this.control.element;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
element.autocomplete = "off";
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
element.attachEvent('onfocus', _focusHandler);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
element.attachEvent('onblur', _blurHandler);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
element.attachEvent('onkeydown', _keyDownHandler);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
var elementBounds = Sys.UI.Control.getBounds(element);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (!_completionListElement)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
_completionListElement = document.createElement('DIV');
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
document.body.appendChild(_completionListElement);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
// apply styles
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
var completionListStyle = _completionListElement.style;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
if ( _cssList != '' )
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
_completionListElement.className = _cssList;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
else
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
completionListStyle.backgroundColor = 'window';
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
completionListStyle.color = 'windowtext';
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
completionListStyle.border = 'solid 1px buttonshadow';
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
completionListStyle.cursor = 'default';
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
// default styles
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
completionListStyle.unselectable = 'unselectable';
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
completionListStyle.overflow = 'hidden';
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
completionListStyle.visibility = 'hidden';
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
completionListStyle.width = (elementBounds.width - 2) + 'px';
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
_completionListElement.attachEvent('onmousedown', _mouseDownHandler);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
_completionListElement.attachEvent('onmouseup', _mouseUpHandler);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
_completionListElement.attachEvent('onmouseover', _mouseOverHandler);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
document.body.appendChild(_completionListElement);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
var popupControl = new Sys.UI.Control(_completionListElement);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
_popupBehavior = new Sys.UI.PopupBehavior();
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
_popupBehavior.set_parentElement(element);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
_popupBehavior.set_positioningMode(Sys.UI.PositioningMode.BottomLeft);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
popupControl.get_behaviors().add(_popupBehavior);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
_popupBehavior.initialize();
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
popupControl.initialize();
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this._hideCompletionList = function()
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
_popupBehavior.hide();
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
_completionListElement.innerHTML = '';
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
_selectIndex = -1;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this._highlightItem = function(item)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
var children = _completionListElement.childNodes;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
// non-selecteditems
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
for (var i = 0; i < children.length; i++)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
var child = children[i];
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (child != item)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
if ( _cssItem != '' )
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
child.className = _cssItem;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
else
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
child.style.backgroundColor = 'window';
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
child.style.color = 'windowtext';
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
// selected item
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
if ( _cssHoverItem != '' )
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
item.className = _cssHoverItem;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
else
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
item.style.backgroundColor = 'highlight';
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
item.style.color = 'highlighttext';
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this._onListMouseDown = function()
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (window.event.srcElement != _completionListElement)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
this._setText(window.event.srcElement.firstChild.nodeValue);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this._onListMouseUp = function()
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
this.control.focus();
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this._onListMouseOver = function()
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
var item = window.event.srcElement;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
_selectIndex = -1;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
this._highlightItem(item);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this._onGotFocus = function()
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
_timer.set_enabled(true);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this._onKeyDown = function()
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
var e = window.event;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (e.keyCode == 27)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
this._hideCompletionList();
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
e.returnValue = false;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
else if (e.keyCode == Sys.UI.Key.Up)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (_selectIndex > 0)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
_selectIndex--;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
this._highlightItem(_completionListElement.childNodes[_selectIndex]);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
e.returnValue = false;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
else if (e.keyCode == Sys.UI.Key.Down)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (_selectIndex < (_completionListElement.childNodes.length - 1))
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
_selectIndex++;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
this._highlightItem(_completionListElement.childNodes[_selectIndex]);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
e.returnValue = false;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
else if (e.keyCode == Sys.UI.Key.Return)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (_selectIndex != -1)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
this._setText(_completionListElement.childNodes[_selectIndex].firstChild.nodeValue);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
e.returnValue = false;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (e.keyCode != Sys.UI.Key.Tab)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
_timer.set_enabled(true);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this._onLostFocus = function()
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
_timer.set_enabled(false);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
this._hideCompletionList();
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
function _onMethodComplete(result, response, context)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
var acBehavior = context[0];
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
var prefixText = context[1];
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
acBehavior._update(prefixText, result, true);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this._onTimerTick = function(sender, eventArgs)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (_serviceURL && _serviceMethod)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
var text = this.control.element.value;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
if ( text.lastIndexOf(_separatorChar) > -1 )
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
// found separator char in the text
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
var pos = text.lastIndexOf(_separatorChar);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
pos++;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
text = text.substring(pos, (text.length));
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
text = text.trim();
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (text.trim().length < _minimumPrefixLength)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
this._update('', null, false);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
return;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (_currentPrefix != text)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
_currentPrefix = text;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (_cache && _cache[text])
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
this._update(text, _cache[text], false);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
return;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
Sys.Net.ServiceMethod.invoke(_serviceURL, _serviceMethod, _appURL,
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{ prefixText : _currentPrefix, count: _completionSetCount },
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
_onMethodComplete, null, null, null,
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
[ this, text ]);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this._setText = function(text)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
_timer.set_enabled(false);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
_currentPrefix = text;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (Sys.UI.TextBox.isInstanceOfType(this.control))
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
this.control.set_text(text);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
else
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
var currentValue = this.control.element.value;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
if ( currentValue.lastIndexOf(_separatorChar) > -1 )
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
// found separator char in the text
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
var pos = currentValue.lastIndexOf(_separatorChar);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
pos++;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
currentValue = currentValue.substring(0, pos) + text;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
else
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
// no separator char found
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
currentValue = text;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
this.control.element.value = currentValue;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
this._hideCompletionList();
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this._update = function(prefixText, completionItems, cacheResults)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (cacheResults)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (!_cache)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
_cache =
{ };
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
_cache[prefixText] = completionItems;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
_completionListElement.innerHTML = '';
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
_selectIndex = -1;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (completionItems && completionItems.length)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
for (var i = 0; i < completionItems.length; i++)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
var itemElement = document.createElement('div');
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
itemElement.appendChild(document.createTextNode(completionItems[i]));
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
itemElement.__item = '';
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
if ( _cssItem != '' )
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
itemElement.className = _cssItem;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
else
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
var itemElementStyle = itemElement.style;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
itemElementStyle.padding = '1px';
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
itemElementStyle.textAlign = 'left';
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
itemElementStyle.textOverflow = 'ellipsis';
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
itemElementStyle.backgroundColor = 'window';
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
itemElementStyle.color = 'windowtext';
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
_completionListElement.appendChild(itemElement);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
_popupBehavior.show();
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
else
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
_popupBehavior.hide();
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
Custom.UI.AutoCompleteBehavior.registerSealedClass('Custom.UI.AutoCompleteBehavior', Sys.UI.Behavior);
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
Sys.TypeDescriptor.addType('script', 'autoComplete', Custom.UI.AutoCompleteBehavior);
首先我们在Extender类中添加了四个已经创建的属性,现在我们可以在.aspx页面中使用这些属性的值。
在代码中找到函数_onTimerTick,它用来延迟显示下拉列表,在该函数中,我们可以发送该值到WebService,如果需要我们也可以改变它的值。
var text = this.control.element.value;
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
if ( text.lastIndexOf(_separatorChar) > -1 )
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
// found separator char in the text, choosing the right word
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
var pos = text.lastIndexOf(_separatorChar);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
pos++;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
text = text.substring(pos, (text.length));
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
text = text.trim();
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
现在,无论用户何时在文本框中输入一个值,AutoCompleteBehavior会验证驻留的分割字符,找到最后一个单词或者TextBox中的全部文本发送到WebService。
测试
解决方案:AutoCompleteBehavior.js保存在scriptLibrary文件夹下,CustomAutoCompleteProperties.cs 和CustomAutoCompleteExtender.cs保存在App_Code文件夹下。
创建一个新的.aspx文件,并且添加对CustomAutoCompleteExtender类的引用,并在页面中放一些控件:
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<%
@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<%
@ Register Namespace="CustomAtlas.Controls" TagPrefix="customAtlas" %>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<html xmlns="http://www.w3.org/1999/xhtml">
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<head runat="server">
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<title>CustomAutoCompleteExtender</title>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
</head>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<body>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<form id="form1" runat="server">
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<atlas:ScriptManager ID="scriptManager" runat="server">
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<Scripts>![](https://www.cnblogs.com/Images/dot.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
<atlas:ScriptReference ScriptName="Custom" />
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
<atlas:ScriptReference Path="scriptLibrary/CustomAutoCompleteBehavior.js" />
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
</Scripts>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
</atlas:ScriptManager>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<div>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<asp:TextBox ID="txtSuggestions" runat="server"></asp:TextBox>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<customAtlas:CustomAutoCompleteExtender ID="CustomAutoCompleteExtender1" runat="server">
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<customAtlas:CustomAutoCompleteProperties
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
TargetControlID="txtSuggestions"
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
ServicePath="WebServiceDemo.asmx"
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
ServiceMethod="GetSuggestions"
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
MinimumPrefixLength="1"
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
SeparatorChar=","
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
CssList="autoCompleteList"
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
CssItem="autoCompleteItem"
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
CssHoverItem="autoCompleteHoverItem"
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
Enabled="true" />
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
</customAtlas:CustomAutoCompleteExtender>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
</div>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
</form>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
</body>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
</html>
调用一个简单的示例WebService,输入一个单词,再输入逗号(逗号是默认值),并重新输入一个新的单词,将会显示出一个新的建议下拉列表。显示效果如下:
![](https://www.cnblogs.com/images/cnblogs_com/terrylee/CustomAutoCompleteExt.gif)
希望对你有所帮助!
原文地址:http://www.codeproject.com/Ajax/CustomAutoCompleteExt.asp