自动补全

自2.1.0版本起

为元素添加自动补全功能。

选项
方法
示例

选项

search( value, [done])

类型: 函数

当输入值发生变化时调用的函数，应返回可能的补全选项列表。

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

value - 元素的当前值。
done - 一个可选的回调函数，完成时将调用该函数。

如果函数有两个参数，它必须通过调用done返回结果，而不是直接返回。这使得函数能够执行异步工作来生成补全内容。

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

   {
       value: "<string>", // The value to insert if selected
       label: "<string>"|DOMElement  // The label to display in the dropdown
   }

label可以是一个DOM元素。这可用于提供自定义的完成显示 - 例如，包含更多上下文信息。

方法

destroy( )

从元素中移除自动完成功能。

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

示例

纯输入框的自动补全功能

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

// View the page source to see the full list of animals used in
// this example
let animals = ["Aardvark","Alligator","Alpaca","Anaconda","Ant","Antelope",
               "Carp","Cat","Caterpillar","Catfish","Cheetah","Chicken",
               "Deer","Dinosaur","Dog","Dolphin","Donkey","Dove" ];

$("#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">

// View the page source to see the full list of animals used in
// this example
let animals = ["Aardvark","Alligator","Alpaca","Anaconda","Ant","Antelope",
               "Carp","Cat","Caterpillar","Catfish","Cheetah","Chicken",
               "Deer","Dinosaur","Dog","Dolphin","Donkey","Dove" ];

$("#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})
        // Simulate asynchronous work by using setTimout
        // to delay response by 1 second
        setTimeout(function() {
            done(matches);
        },1000)
    }
})

选择一种动物

自定义结果标签

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

// View the page source to see the full list of animals used in
// this example
let animals = ["Aardvark","Alligator","Alpaca","Anaconda","Ant","Antelope",
               "Carp","Cat","Caterpillar","Catfish","Cheetah","Chicken",
               "Deer","Dinosaur","Dog","Dolphin","Donkey","Dove" ];

$("#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( )

示例

纯输入框的自动补全功能

异步搜索

自定义结果标签