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 属性的对象)。

实现的效果截图:

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

 

 

 

 

 

 

 

 

 

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值