自动补全

自 2.1.0 版本起

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

选项
方法
示例

选项

search( value, [done])

类型：函数

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

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

value - <input> 的当前值。
done - 一个可选的回调函数，将以补全结果作为参数被调用。

如果函数有两个参数，它**必须**调用 done 并传入结果，而不是直接返回。这允许函数执行异步工作来生成补全。

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

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

label 可以是一个 DOM 元素。这可用于提供定制的补全显示——例如，包含更多上下文信息。

方法

destroy( )

从 <input> 中移除自动补全功能。

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

示例

普通 `<input>` 上的自动补全

<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( )

示例

普通 <input> 上的自动补全

异步搜索

自定义结果标签

普通 `<input>` 上的自动补全