自动完成

自 2.1.0 版本起

为 <input> 元素添加自动完成功能。

选项
方法
示例

选项

search( value, [done])

类型: 函数

一个在输入值更改时调用的函数，应该返回一个可能的补全列表。

该函数可以接受一个或两个参数：

value - 当前的 <input> 值。
done - 可选的回调函数，将使用补全结果调用该函数。

如果函数有两个参数，它必须使用 done 调用结果，而不是返回它们。这允许函数进行异步工作以生成补全。

返回的补全列表必须是对象数组，形式如下：

   {
       value: "<string>", // 如果选择则插入的值
       label: "<string>"|DOMElement  // 在下拉中显示的标签
   }

label 可以是一个 DOMElement。这可以用于提供补全的自定义显示 - 例如，包含更多上下文信息。

方法

destroy( )

从 <input> 中移除自动完成功能。

$(".input").autoComplete('destroy');

示例

在普通 `<input>` 上实现自动完成

<input type="text" id="node-input-example1">

// 查看页面源代码以查看此示例中使用的完整动物列表
let animals = ["土豚","鳄鱼","羊驼","巨蟒","蚂蚁","羚羊",
               "鲤鱼","猫","毛虫","鲶鱼","猎豹","鸡",
               "鹿","恐龙","狗","海豚","驴","鸽子"];

$("#node-input-example1").autoComplete({
    search: function(val) {
        var matches = [];
        animals.forEach(v => {
            var i = v.toLowerCase().indexOf(val.toLowerCase());
            if (i > -1) {
                matches.push({
                    value: v,
                    label: v,
                    i: i
                })
            }
        });
        matches.sort(function(A,B){return A.i-B.i})
        return matches
    }
})

选择一种动物

异步搜索

<input type="text" id="node-input-example2">

// 查看页面源代码以查看此示例中使用的完整动物列表
let animals = ["土豚","鳄鱼","羊驼","巨蟒","蚂蚁","羚羊",
               "鲤鱼","猫","毛虫","鲶鱼","猎豹","鸡",
               "鹿","恐龙","狗","海豚","驴","鸽子"];

$("#node-input-example2").autoComplete({
    search: function(val, done) {
        var matches = [];
        animals.forEach(v => {
            var i = v.toLowerCase().indexOf(val.toLowerCase());
            if (i > -1) {
                matches.push({
                    value: v,
                    label: v,
                    i: i
                })
            }
        });
        matches.sort(function(A,B){return A.i-B.i})
        // 通过使用 setTimeout 模拟异步工作
        // 延迟响应 1 秒
        setTimeout(function() {
            done(matches);
        },1000)
    }
})

选择一种动物

自定义结果标签

<input type="text" id="node-input-example3">

// 查看页面源代码以查看此示例中使用的完整动物列表
let animals = ["土豚","鳄鱼","羊驼","巨蟒","蚂蚁","羚羊",
               "鲤鱼","猫","毛虫","鲶鱼","猎豹","鸡",
               "鹿","恐龙","狗","海豚","驴","鸽子"];

$("#node-input-example3").autoComplete({
    search: function(val) {
        var matches = [];
        animals.forEach(v => {
            var i = v.toLowerCase().indexOf(val.toLowerCase());
            if (i > -1) {
                var pre = v.substring(0,i);
                var matchedVal = v.substring(i,i+val.length);
                var post = v.substring(i+val.length)

                var el = $('<div/>',{style:"white-space:nowrap"});
                $('<span/>').text(pre).appendTo(el);
                $('<span/>',{style:"font-weight: bold; color:red"}).text(matchedVal).appendTo(el);
                $('<span/>').text(post).appendTo(el);

                matches.push({
                    value: v,
                    label: el,
                    i:i
                })
            }
        })
        matches.sort(function(A,B){return A.i-B.i})
        return matches
    }
})

选择一种动物

自动完成

选项

方法

事件

类型

选项

search( value, [done])

方法

destroy( )

示例

在普通 <input> 上实现自动完成

异步搜索

自定义结果标签

在普通 `<input>` 上实现自动完成