Jquery AutoComplete的使用方法

封面图 • 2025-10-03 • jQuery

jQuery AutoComplete 是 jQuery UI 中的一个组件，用于实现输入框的自动补全功能。它可以根据用户输入的内容，动态显示匹配的建议列表。

---

## ✅ 一、使用前准备

要使用 jQuery AutoComplete，你需要引入以下文件：

1. **jQuery Core**（基础库）
2. **jQuery UI**（包含 AutoComplete 组件）

你可以通过 CDN 引入：

```html

<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>
```

---

## ✅ 二、HTML 结构

创建一个 `<input>` 元素作为自动补全的输入框：

```html
<input type="text" id="autocomplete">
```

---

## ✅ 三、基本用法（静态数据）

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

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

---

## ✅ 四、使用远程数据（AJAX 请求）

如果你的数据是通过 AJAX 获取的，可以这样设置：

```javascript
$("#autocomplete").autocomplete({
    source: function(request, response) {
        $.ajax({
            url: "your-server-endpoint.php", // 后端接口地址
            dataType: "json",
            data: {
                term: request.term
            },
            success: function(data) {
                response(data); // 返回匹配结果
            }
        });
    },
    minLength: 2, // 输入至少两个字符才触发搜索
    select: function(event, ui) {
        console.log("Selected: " + ui.item.value);
    }
});
```

---

## ✅ 五、常用选项说明

| 属性 | 说明 |
|------|------|
| `source` | 数据源，可以是数组、字符串（URL）或函数 |
| `minLength` | 输入最小字符数，才开始搜索，默认为 1 |
| `delay` | 延迟时间（毫秒），防止频繁请求 |
| `select` | 当用户选择一个项时触发的回调函数 |
| `focus` | 当焦点移到某一项时触发的回调函数 |
| `autoFocus` | 是否自动聚焦第一个选项（默认 false） |

---

## ✅ 六、示例：结合后端 API

假设你有一个 PHP 接口 `search.php`，返回 JSON 格式数据：

```php
<?php
$term = $_GET['term'];
$data = ["Apple", "Banana", "Cherry", "Date", "Fig"];
$filtered = array_filter($data, function($item) use ($term) {
    return strpos(strtolower($item), strtolower($term)) !== false;
});
echo json_encode(array_values($filtered));
?>
```

然后在前端调用：

```javascript
$("#autocomplete").autocomplete({
    source: "search.php",
    minLength: 2
});
```

---

## ✅ 七、注意事项

- 确保你的服务器支持跨域请求（如果前后端不在同一个域名下）。
- 使用 `source` 函数时，确保返回的数据格式正确（如数组）。
- 如果数据量很大，建议做分页或限制返回数量，避免性能问题。

---

如果你有具体需求（比如使用 Vue 或 React 的 AutoComplete 组件），也可以告诉我，我可以提供更详细的解决方案。