当前位置：首页 > 行业动态 > 正文

complete.js api

admin
行业动态
2025-03-16
5

complete.js 是一个用于处理自动完成功能的 JavaScript 库，它提供了丰富的 API 来帮助开发者快速实现输入建议、搜索提示等功能。

Complete.js API 详解

Complete.js 是一个用于 JavaScript 的自动完成插件，它提供了丰富的功能和灵活的配置选项，可以帮助开发者轻松地在网页中实现自动补全功能，以下是关于 Complete.js API 的详细介绍：

一、初始化

在使用 Complete.js 之前，需要先进行初始化操作，可以通过以下代码来初始化：

$(document).ready(function() {
    $('#autocomplete').complete({
        source: ['apple', 'banana', 'orange', 'grape'],
        maxItems: 5,
        delay: 300
    });
});

上述代码中，#autocomplete 是要应用自动完成功能的输入框的选择器，source 是一个包含自动补全选项的数组，maxItems 指定了最多显示的自动补全项数，delay 表示在输入多少毫秒后触发自动补全。

二、常用参数

| 参数名 | 类型 | 描述 | 默认值 |

| —| —| —| —|

complete.js api 第1张

三、方法

`open()`

手动打开自动补全下拉菜单。

$('#autocomplete').data('complete').open();

`close()`

关闭自动补全下拉菜单。

complete.js api 第2张

$('#autocomplete').data('complete').close();

`destroy()`

销毁自动补全功能，释放相关资源。

$('#autocomplete').data('complete').destroy();

4.setSource(newSource)

更新数据源。

$('#autocomplete').data('complete').setSource(['pear', 'peach', 'plum']);

5.getSelectedItem()

获取当前选中的项目。

var selected = $('#autocomplete').data('complete').getSelectedItem();
console.log(selected);

四、事件

`select`

当下拉菜单中的某一项被选中时触发。

$('#autocomplete').on('select', function(event, item) {
    console.log('Selected item: ' + item);
});

`open`

当下拉菜单打开时触发。

$('#autocomplete').on('open', function() {
    console.log('Dropdown opened');
});

`close`

当下拉菜单关闭时触发。

$('#autocomplete').on('close', function() {
    console.log('Dropdown closed');
});

五、示例

complete.js api 第3张

以下是一个综合示例，展示了如何使用 Complete.js 的各种功能：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Complete.js Example</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-complete/1.0.0/jquery.complete.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-complete/1.0.0/jquery.complete.js"></script>
</head>
<body>
    <input type="text" id="autocomplete" placeholder="Type something...">
    <script>
        $(document).ready(function() {
            $('#autocomplete').complete({
                source: ['apple', 'banana', 'orange', 'grape'],
                maxItems: 5,
                delay: 300,
                onSelect: function(event, item) {
                    alert('You selected: ' + item);
                },
                onKeyPress: function(event, query) {
                    if (query === 'a') {
                        console.log('You pressed "a"');
                    }
                }
            });
        });
    </script>
</body>
</html>

在这个示例中，当用户在输入框中输入内容时，会自动显示匹配的选项，当用户选择某一项时，会弹出提示框显示选中的内容，如果用户按下了“a”键，会在控制台输出相关信息。

六、FAQs

问题 1：如何自定义自动补全项的显示格式？

答：可以通过设置render 选项来自定义自动补全项的显示格式。

$('#autocomplete').complete({
    source: ['apple', 'banana', 'orange', 'grape'],
    render: function(item) {
        return '<div><strong>' + item + '</strong> A delicious fruit</div>';
    }
});

这样，每个自动补全项都会按照指定的 HTML 格式显示，包括水果名称和一个描述。

问题 2：如何根据用户输入动态获取数据源？

答：可以将source 设置为一个函数，该函数会根据用户的输入返回相应的数据。

$('#autocomplete').complete({
    source: function(request, response) {
        // 这里可以发送 AJAX 请求到服务器获取数据
        $.ajax({
            url: 'https://api.example.com/search',
            data: { q: request },
            success: function(data) {
                response(data.results); // 假设服务器返回的数据格式中有 results 字段
            }
        });
    },
    delay: 500
});

在这个示例中，当用户输入内容时，会向服务器发送一个 AJAX 请求，服务器根据请求参数返回相应的数据，然后作为自动补全的数据源，这样可以根据实际情况动态获取和显示自动补全选项。

js api