默认情况下,AutoCompleteExtender显示的结果来自于文本框中输入的全部值,这里我的实现,它可以去搜索文本框中多于一个的单词,它们之间用逗号分割(或者别的符号),任何时间输入逗号,将会显示一个新的建议下拉列表。AutoCompleteExtender并不支持这种类型的列表,我们将通过一些修改来实现这些属性。[英文原文来自于CodeProject]

 

主要内容

1.简介

2.继承AutoCompleteProperties

3.继承AutoCompleteExtender

4.实现自定义的AutoCompleteBehavior

5.测试

 

简介

默认情况下,AutoCompleteExtender显示的结果来自于文本框中输入的全部值,这里我的实现,它可以去搜索文本框中多于一个的单词,它们之间用逗号分割(或者别的符号),任何时间输入逗号,将会显示一个新的建议下拉列表。AutoCompleteExtender并不支持这种类型的列表,我们将通过一些修改来实现这些属性。

 

继承AutoCompleteProperties

第一步为新控件CustomAutoCompleteExtender创建C#类,我们将定义一个继承于AutoCompleteProperties的类CustomAutoCompleteProperties,并添加多单词建议支持和CSS样式属性,为了实现多单词建议,我们需要一个属性SeparatorChar,通过该属性,我们可以拆分成一个一个的单词并为最新输入的单词打开建议列表。

提供多单词建议的自定义AutoCompleteExtendernamespace CustomAtlas.Controls
提供多单词建议的自定义AutoCompleteExtender
}

CssList, CssItemCssHoverItem需要构建控件的样式,CssList提供用来画下拉列表,CssItemCssHoverItem用来画列表中的每一项。

 

继承AutoCompleteExtender

完成了第一步,我们继续实现Extender,在这里我们需要从AutoCompleteExtender继承并为控件添加新的属性。

提供多单词建议的自定义AutoCompleteExtendernamespace CustomAtlas.Controls
提供多单词建议的自定义AutoCompleteExtender
}

 

实现自定义的AutoCompleteBehavior

现在控件已经完成,我们只剩下管理客户端代码以发送正确的值到WebService并提供我们自定义的CSS样式。在Atlas.js中查找到AutoCompleteBehavior,我们可以拷贝到这里并注册我们自己的类。

提供多单词建议的自定义AutoCompleteExtenderype.registerNamespace('Custom.UI');
提供多单词建议的自定义AutoCompleteExtender
提供多单词建议的自定义AutoCompleteExtender 
提供多单词建议的自定义AutoCompleteExtender
Sys.TypeDescriptor.addType('script', 'autoComplete', Custom.UI.AutoCompleteBehavior);

首先我们在Extender类中添加了四个已经创建的属性,现在我们可以在.aspx页面中使用这些属性的值。

在代码中找到函数_onTimerTick,它用来延迟显示下拉列表,在该函数中,我们可以发送该值到WebService,如果需要我们也可以改变它的值。

提供多单词建议的自定义AutoCompleteExtendervar text = this.control.element.value;
提供多单词建议的自定义AutoCompleteExtender
提供多单词建议的自定义AutoCompleteExtender
if ( text.lastIndexOf(_separatorChar) > -1 ) 
提供多单词建议的自定义AutoCompleteExtender
}

现在,无论用户何时在文本框中输入一个值,AutoCompleteBehavior会验证驻留的分割字符,找到最后一个单词或者TextBox中的全部文本发送到WebService

 

测试

解决方案:AutoCompleteBehavior.js保存在scriptLibrary文件夹下,CustomAutoCompleteProperties.cs CustomAutoCompleteExtender.cs保存在App_Code文件夹下。

创建一个新的.aspx文件,并且添加对CustomAutoCompleteExtender类的引用,并在页面中放一些控件:

>

调用一个简单的示例WebService,输入一个单词,再输入逗号(逗号是默认值),并重新输入一个新的单词,将会显示出一个新的建议下拉列表。显示效果如下:

希望对你有所帮助!

原文地址:http://www.codeproject.com/Ajax/CustomAutoCompleteExt.asp

相关文章:

  • 2022-01-04
  • 2022-01-07
  • 2022-12-23
  • 2022-12-23
  • 2021-08-29
  • 2021-12-16
  • 2021-10-07
  • 2021-05-16
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-10-22
  • 2021-07-11
  • 2022-03-07
相关资源
相似解决方案