jQuery UI 实例 - 自动完成（Autocomplete）

封面图 • 2025-11-16 • jQuery

jQuery UI 的 **Autocomplete（自动完成）** 是一个非常实用的组件，用于在用户输入时提供搜索建议。它可以通过简单的配置实现本地数据或远程数据的自动补全功能。

---

## 🧾 一、基本结构

要使用 jQuery UI 的 Autocomplete，你需要：

1. 引入 jQuery 和 jQuery UI 的库文件。
2. 在 HTML 中创建一个 `<input>` 元素。
3. 使用 JavaScript 初始化 Autocomplete 组件。

---

## 📦 二、引入依赖

```html

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">

<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
```

---

## 💡 三、本地数据示例

### HTML:

```html
<input id="autocomplete" placeholder="输入内容..." />
```

### JavaScript:

```javascript
$(function() {
    var availableTags = [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"
    ];

$("#autocomplete").autocomplete({
        source: availableTags
    });
});
```

---

## 🌐 四、远程数据示例（AJAX）

如果你的数据是通过 AJAX 请求获取的，可以这样使用：

### HTML:

```html
<input id="remote-autocomplete" placeholder="搜索..." />
```

### JavaScript:

```javascript
$(function() {
    $("#remote-autocomplete").autocomplete({
        source: function(request, response) {
            $.ajax({
                url: "https://api.example.com/search", // 替换为你的 API 地址
                dataType: "json",
                data: {
                    term: request.term
                },
                success: function(data) {
                    response(data); // 假设返回的是数组
                }
            });
        },
        minLength: 2 // 输入至少两个字符才开始搜索
    });
});
```

---

## 🎨 五、样式与自定义

你可以通过 CSS 自定义 Autocomplete 的外观，例如：

```css
.ui-menu-item {
    font-size: 14px;
}
.ui-menu-item:hover {
    background-color: #f0f0f0;
}
```

---

## 🧩 六、其他常用选项

| 选项 | 描述 |
|------|------|
| `source` | 数据源，可以是数组或函数 |
| `minLength` | 输入最小长度才触发自动完成 |
| `delay` | 输入后延迟多少毫秒再请求数据（适用于远程） |
| `select` | 当用户选择一个选项时触发的回调函数 |

### 示例：添加 `select` 事件

```javascript
$("#autocomplete").autocomplete({
    source: availableTags,
    select: function(event, ui) {
        alert("你选择了: " + ui.item.value);
    }
});
```

---

## ✅ 七、总结

- jQuery UI 的 Autocomplete 简单易用，适合本地和远程数据。
- 可以通过 `source` 指定数据来源。
- 支持丰富的事件和样式定制。

---

如果你需要我帮你生成一个完整的 HTML 页面示例，或者有更具体的使用场景（如从数据库动态加载），欢迎继续提问！