jQuery.Autocomplete实现自动完成功能

封面图 • 2025-09-24 • jQuery

`jQuery Autocomplete` 是一个基于 jQuery 的插件，用于在输入框中提供自动完成功能。它可以帮助用户快速选择或输入内容。这个插件非常灵活，可以与静态数据源（如数组）或动态数据源（如服务器端 API）一起使用。

以下是如何使用 `jQuery Autocomplete` 实现自动完成功能的步骤和示例代码：

### 1. 引入必要的文件

首先，你需要引入 jQuery 和 jQuery Autocomplete 插件的相关文件。你可以通过 CDN 引入这些文件。

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Autocomplete Example</title>
    
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>

```

### 2. 创建 HTML 输入框

接下来，创建一个输入框，我们将为这个输入框添加自动完成功能。

```html
<div>
    <label for="autocomplete">输入城市名称:</label>
    <input type="text" id="autocomplete" />
</div>
```

### 3. 初始化 Autocomplete 插件

在页面加载完成后，使用 jQuery 初始化 Autocomplete 插件，并设置数据源。

```html
<script>
$(document).ready(function() {
    // 设置自动完成的数据源
    var availableTags = [
        "北京",
        "上海",
        "广州",
        "深圳",
        "成都",
        "杭州",
        "重庆",
        "武汉",
        "西安",
        "南京"
    ];

// 初始化 Autocomplete 插件
    $("#autocomplete").autocomplete({
        source: availableTags,  // 数据源
        minLength: 1,           // 最少输入字符数触发自动完成
        select: function(event, ui) {
            console.log("你选择了: " + ui.item.value);
        }
    });
});
</script>
```

### 4. 完整代码

将上述代码整合到完整的 HTML 文件中：

<div>
    <label for="autocomplete">输入城市名称:</label>
    <input type="text" id="autocomplete" />
</div>

</body>
</html>
```

### 5. 功能说明

- **source**: 指定自动完成的数据源，这里我们使用了一个简单的数组。
- **minLength**: 设置最少输入字符数才能触发自动完成功能，默认值是 1。
- **select**: 当用户选择某个选项时触发的回调函数，可以通过 `ui.item.value` 获取选中的值。

### 6. 动态数据源

如果你需要从服务器端获取数据，可以将 `source` 属性设置为一个函数，该函数会向服务器发送请求并返回数据。

```javascript
$("#autocomplete").autocomplete({
    source: function(request, response) {
        $.ajax({
            url: "/your-server-endpoint",  // 替换为你的服务器端 API 地址
            dataType: "json",
            data: {
                term: request.term
            },
            success: function(data) {
                response(data);  // 返回服务器端返回的数据
            }
        });
    },
    minLength: 1,
    select: function(event, ui) {
        console.log("你选择了: " + ui.item.value);
    }
});
```

在这个例子中，`/your-server-endpoint` 是你的服务器端 API 地址，它应该返回一个 JSON 数组，例如 `["北京", "上海", "广州"]`。

### 总结

通过以上步骤，你可以轻松地使用 jQuery Autocomplete 插件实现自动完成功能。你可以根据需求调整数据源、最小输入字符数等参数，以满足不同的应用场景。