天天看点

Autocomplete自动完成

自动完成功能根据用户输入值进行搜索和过滤,让用户快速找到并从预设值列表中选择。

任何可以接收输入的字段都可以转换为 Autocomplete,通过给 Autocomplete 字段焦点或者在其中输入字符,插件开始搜索匹配的条目并显示供选择的值的列表。它能从存放数据的文本或是数据库里将所有以这些字母开头的数据提示给用户,供用户选择,通过输入更多的字符,用户可以过滤列表以获得更好的匹配。

下面是所用到的代码截图:

Autocomplete自动完成
Autocomplete自动完成

在上面代码截图中,Autocomplete事件里包含了source和select(event,ui);source是定义要使用的数据,是必须指定的,支持的类型包括Array 或 String 或 Function( Object request, Function response( Object data ) )。select是当从菜单中选择条目时触发;默认的动作是把文本域中的值替换为被选中的条目的值;取消该事件会阻止值被更新,但不会阻止菜单关闭。event的类型:Event,ui的类型:Object;item的类型:Object(描述:一个带有被选项的 label 和 value 属性的对象)。

实现的效果截图:

Autocomplete自动完成

如截图所示,在文本框输入一个字母它就自动进行搜索和过滤数据给用户选择了。

继续阅读