ATJS参数是什么？它有什么作用？

## ATJS参数详解

ATJS（At.js）是一个开源的JavaScript库，用于实现自动完成功能，如输入@符号后显示候选列表，它支持HTML5的contentEditable属性，可以绑定到多个字符上，并且提供了丰富的配置选项和回调函数，本文将详细介绍ATJS的参数及其配置方法，并提供相关示例和问题解答。

### 一、基本介绍

ATJS主要用于实现类似于微博或Twitter中的@提及功能，通过简单的配置，开发者可以轻松地在网页中实现用户输入特定字符（如@）后自动弹出好友列表或其他数据的功能，ATJS依赖于jQuery库，并需要引入相应的CSS文件来实现样式。

### 二、核心参数

#### 1. at: string

触发弹出菜单的按键，当用户输入“@”时，会触发弹出菜单。

```javascript

at: "@"

```

#### 2. data: array | string | function

候选数据的数组、JSON字符串或返回数据的函数，这些数据将用于生成弹出菜单项。

```javascript

data: ['Peter', 'Tom', 'Anne']

```

或者使用JSON字符串：

```javascript

data: '["Peter", "Tom", "Anne"]'

```

或者通过函数动态获取数据：

```javascript

data: function(query, callback) {

// 通过Ajax请求或其他方式获取数据

callback(data);

```

#### 3. insertTpl: string

插入到输入框中的模板，可以使用占位符${id}和${name}来表示数据项的属性。

```javascript

insertTpl: '@${name}'

```

#### 4. displayTpl: string

显示在弹出菜单中的模板，同样可以使用占位符${name}来表示数据项的属性。

```javascript

displayTpl: "

"

```

#### 5. limit: number

限制显示的菜单项数量，只显示前20个匹配项。

```javascript

limit: 20

```

### 三、高级配置

除了上述核心参数外，ATJS还提供了一些高级配置选项，以满足更复杂的需求。

#### 1. searchKey: string

指定用于搜索的键名，默认为`value`，即假设数据项是一个对象，且有一个名为`value`的属性用于匹配。

```javascript

searchKey: 'username'

```

#### 2. callbacks: object

一组回调函数，包括`beforeInsert`, `afterInsert`, `filter`, `highlight`, `renderTemplate`等，这些回调函数允许开发者自定义数据插入前后的行为、过滤数据、高亮显示匹配项以及渲染模板等。

```javascript

callbacks: {

beforeInsert: function (item) {

// 在插入之前执行的逻辑

},

afterInsert: function (item) {

// 在插入之后执行的逻辑

},

filter: function (query, item) {

// 自定义过滤逻辑

return true; // 返回true表示该项符合条件，应显示在菜单中

},

highlight: function (query, item) {

// 自定义高亮显示逻辑

return item.replace(new RegExp('(' + query + ')', 'ig'), function($1, match) {

return "$1";

});

},

renderTemplate: function (item, escape) {

// 自定义渲染逻辑

return '

';

}

```

### 四、示例代码

以下是一个完整的示例，展示了如何使用ATJS实现一个简单的@提及功能：

```html

```

### 五、常见问题与解答

#### Q1: ATJS如何支持多个触发字符？

A1: ATJS目前不支持直接配置多个触发字符，但你可以通过监听不同的事件或手动触发`atwho`的方法来实现类似的功能，你可以监听键盘事件，当用户按下特定的键时，手动调用`atwho`的方法来显示弹出菜单。

#### Q2: ATJS如何自定义弹出菜单的样式？

A2: ATJS提供了`displayTpl`参数用于自定义弹出菜单的样式，你可以在该参数中使用HTML和CSS来定义菜单的外观，你还可以通过修改ATJS的CSS文件或添加自定义的CSS样式来进一步定制弹出菜单的样式，需要注意的是，由于弹出菜单是通过动态生成的DOM元素实现的，因此你需要确保你的CSS选择器能够正确地应用到这些元素上。

到此，以上就是小编对于“atjs参数”的问题就介绍到这了，希望介绍的几点解答对大家有用，有任何问题和不懂的，欢迎各位朋友在评论区讨论，给我留言。