自动完成(Autocomplete)

自动完成组件可用于快速的为文本框添加Autocomplete功能，目前在FastAdmin1.3.0+版本支持该功能。

使用示例

<input type="text" class="form-control" data-role="autocomplete" data-autocomplete-options='{"url":"ajax/get_user_list"}' />

<input type="text" class="form-control" data-role="autocomplete" data-autocomplete-options='{"url":"ajax/get_user_list", "minChars":2}' />

常用属性

同时我们还可以通过配置data-autocomplete-options属性来自定义Autocomplete的功能
data-autocomplete-options支持以下属性配置：

属性	类型	描述	默认值
url	string	返回查询列表的接口URL	空
autoSelectFirst	bool	自动选择第一条结果	false
onSelect	function	确认选中以后的回调	空
onHint	function	选中以后的回调	空
width	int	列表宽度	auto
minChars	int	开始搜索的最小字符	1
maxHeight	int	列表最高调试	300
params	object/function	自定义参数	{}
zIndex	int	列表的zIndex层级值	9999
type	string	Ajax请求类型	get
delimiter	string	分隔符	null
ajaxSettings	object	Ajax自定义配置	{}
noCache	bool	禁止缓存	false
orientation	string	列表方向	bottom
forceFixPosition	bool	强制修正列表位置	false

如果需要传递function类型属性，例如处理onSelect、onHint、params属性，此时我们只能通过在JS中给元素添加参数，不支持使用data-autocomplete-options的方式，如

$("#test1").data("autocomplete-options", {
    "url":"ajax/get_user_list", 
    "minChars":2,
    "onSelect":function(){
        //处理回调事件
    },
    "params": function(){
        //动态传递参数
        return {"a":1,"b":2};
    }
});

Ajax返回值

Ajax返回值必须是JSON类型，格式如下：

{
    "query": "iPhone",
    "suggestions": [
        { "value": "iPhone 11", "data": "iphone11" },
        { "value": "iPhone 12",       "data": "iphone12" },
        { "value": "iPhone XR",        "data": "iphonexr" }
    ]
}

也可以是以下的数据格式：

{
    "query": "iPhone",
    "suggestions": ["iphone11", "iphone12", "iphone13"]
}

整合标签输入

Autocomplete组件还可以与标签输入无缝整合，实现标签输入的自动提示，具体请参考标签输入章节文档

特别感谢

Autocomplete组件使用开源组件：https://github.com/devbridge/jQuery-Autocomplete

文档最后更新时间：2023-10-27 16:42:13

著作权归应用插件开发者所有，未经许可，禁止转载、复制此文档的任何内容。

← 日期时间区间标签输入 →