jQuery UI AutoComplete的使用

时间:2022-11-13 17:49:58

现场提出优化单,Table Mapping里关于获取数据源下所有表名的地方由于表数量过多选择不便,需添加搜索功能。原本的实现是一个Dialog ,现打算将其改为AutoComplete。

jQuery UI AutoComplete的使用

框架使用的是jQuery UI Autocomplete 1.8.23。 据说jquery.autocomplete很好,但还是用框架已经引入的吧。

开工吧,先进菜鸟里面实践实践,找找感觉。

基础的Demo,很简单只要这样就可以了

jQuery UI AutoComplete的使用

再改改参数

jQuery UI AutoComplete的使用

一个基础功能的AutoComplete就完成了。

--------------------------------------------------------------------------------------------此处分割

AutoComplete 提供了足够用的方法、事件

jQuery UI AutoComplete的使用

常用参数如下

1.Source:用于指定数据来源,类型为String、Array、Function

  •   String:当使用一个字符串,Autocomplete 插件希望该字符串指向一个能返回 JSON 数据的 URL 资源。
  •   Array:可用于本地数据的一个数组。支持两种格式: 字符串数组:[ "Choice1", "Choice2" ] 带有 label 和 value 属性的对象数组:[ { label: "Choice1", value: "value1" }, ... ]
  •   Function(request, response):第三个变量,一个回调函数,提供最大的灵活性,可用于连接任何数据源到 Autocomplete。通过request.term获得输入的值,response([Array])来呈现数据。

2.minLength: 执行搜索前用户必须输入的最小字符数。对于仅带有几项条目的本地数据,通常设置为零,但是当单个字符搜索会匹配几千项条目时,设置个高数值是很有必要的。

3.autoFocus:如果设置为 true,当菜单显示时,第一个条目将自动获得焦点

 对于source的三个数据来源,我使用了Array。这对我功能的实现已经够用。如果想要对获取的值进行再一步加工的话,可以使用Function。Function的灵活性更高些,通过request.term获得输入的值,response([Array])来呈现数据

对于事件,举个栗子

当想要焦点移动到一个条目上(未选择)时,将某控件上赋值则可使用focus事件监听,形如这样

jQuery UI AutoComplete的使用

当想要光标刚键入控件,就查询出全部。可通过search方法。就不一一列举了。可以多试试

原本Source用Function写了,后来发现其实很简短的代码就可以完成了,不需要Function,也不需要刻意写成{label : xx ,value :xx}格式

 jQuery UI AutoComplete的使用