自动完成框

简介

自动完成框（autoComplete）根据用户输入的值给出建议的选项进行自动补全。数据源为必须指定的属性，可分为三类，任选其一。其中：

(1).arraySource：定义类型为数组的数据选项来源；
(2).urlSource：定义类型为字符串的数据选项来源，该字符串为可获得json对象的url地址；
(3).functionSource：定义类型为回调函数的数据选项来源。

使用方法

1. 静态框架使用方法`仅EAS7.5版本`

<wafctrl:text id="demo" style="margin-top:5px;" name="demo">
    <wafctrl:autoComplete arraySource="datas"></wafctrl:autoComplete>
</wafctrl:text>

2. JS动态创建`EAS8.0+`

var options = {
    id:"autoComplete",
    arraySource:[ "ActionScript", "AppleScript", "Asp", "BASIC",
        "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang",
        "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp",
        "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme"]
};
var parentDom = waf("body");
var dom = waf.createDOM("text", options);
waf.appendDOM(parentDom, dom);
waf.initComponent("autoComplete", options, dom);

3. 通用DOM创建`EAS8.0+`

<input id="autoComplete" type="text" />

var options = {
    id:"autoComplete",
    arraySource:[ "ActionScript", "AppleScript", "Asp", "BASIC",
        "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang",
        "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp",
        "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme"]
};
<!--DOM创建好之后，使用js初始化控件-->
waf("#autoComplete").wafAutoComplete(options);

4. 方法&事件使用`EAS7.5+`

//调用方法
waf("#id").wafAutoComplete("method", parameter...);
//eg:方法调用
waf("#id").wafAutoComplete("getValue");
waf("#id").wafAutoComplete("close");
//eg:更改事件
waf("#id").wafAutoComplete("option","onchange",fn);

属性说明

arraySource Array 缺省值: null EAS7.5+

定义类型为数组的数据选项来源

urlSource String 缺省值: null EAS7.5+

定义类型为字符串的数据选项来源，该字符串为可获得json对象的url地址

functionSource Function 缺省值: null EAS7.5+

定义类型为回调函数的数据选项来源

disabled Boolean 缺省值: false EAS7.5+

定义是否禁用自动补全功能，默认值为false

autoFocus Boolean 缺省值: false EAS7.5+

定义选项列表的第一个选项是否自动获得焦点，默认值为false

delay Integer 缺省值: 300 EAS7.5+

定义自动补全延迟执行时间，以毫秒为单位，默认值为300毫秒

minlength Integer 缺省值: 0 EAS7.5+

定义需要输入的最少字符数，默认值为1。

height String 缺省值: null EAS7.5+

定义选项列表的高度

formatter Function 缺省值: null EAS7.5+

定义选项列表的格式化方法类型

方法说明

option 参数: (property[,value]) 返回值类型: (任何类型) EAS7.5+

获得或设置自动完成控件某属性的值，当value参数存在时，设置控件的property属性值，且无返回值，否则返回控件的property属性值 [参考样例]

参数说明:
- property: 必要参数，控件的属性
- value: 可选参数，控件的属性值
返回值说明:
参数没有value时，返回值为相应属性的值，返回值类型为属性对应的类型；参数有value时此方法的作用是设置属性的值，没有返回值。

option 参数: (options) 返回值类型: (undefined) EAS7.5+

对控件多个属性进行一次性设置 [参考样例]

参数说明:
- options: 形式如{property:value[,property1:value1,…]}的json对象，用来描述自动完成框的属性和相应的值
返回值说明: 无

search 参数: ([value]) 返回值类型: (undefined) EAS7.5+

根据value的值或者文本框中的内容显示选项列表 [参考样例]

参数说明:
- value: 可选参数，如果指定，根据value的值显示选项列表，否则根据文本框中的内容显示选项列表
返回值说明: 无

close 参数: (无) 返回值类型: (undefined) EAS7.5+

关闭选项建议列表 [参考样例]

参数说明: 无
返回值说明: 无

事件说明

onsearch 参数: (event) EAS7.5+

在请求数据源开始前，并且满足输入最少输入字符数和等待延迟执行时间后，触发onsearch事件。当该事件返回false时，该事件被取消，之后则不会再请求数据源，也不会出现选项列表。 [参考样例]

参数说明: 无

onopen 参数: (event) EAS7.5+

当选项列表打开时触发onopen事件。 [参考样例]

参数说明: 无

onfocus 参数: (event,ui) EAS7.5+

当焦点移动至选项列表的某一项（非选中）时，触发onfocus事件。当该事件通过键盘交互触发时，其默认操作为将输入框的值替换为获得焦点的选项值。若事件被取消，可以阻止输入框的值被更新，但不能阻止选项列表中的选项获得焦点。 [参考样例]

参数说明:
- event: 所响应的事件
- ui: ui.item为获得焦点的选项

onselect 参数: (event,ui) EAS7.5+

当选中选项列表中某一项时，触发onselect事件。其默认操作为将输入框的值替换为所选中的选项值。若事件被取消，可以阻止输入框的值被更新，但不能阻止选项列表关闭。 [参考样例]

参数说明:
- event: 所响应的事件
- ui: ui.item为获得选中的选项

onclose 参数: (event) EAS7.5+

当选项列表隐藏后触发onclose事件 [参考样例]

参数说明: 无