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