# 自动补全项

## 使用方法

自动补全下拉里默认的每一行长什么样：一行主文字，可以带图标、说明和头像。它被导出来，是为了在你自己画结果行的时候直接复用。

```ts
import { TypeaheadItem } from '@astryx-vue/core/Typeahead'
```

[自动补全](/components/typeahead) 的下拉本来就用它画每一行，所以大部分页面不用提到它。只有当这一行要多显示点东西时（比如职位、所属团队）才需要引进来：把 `TypeaheadItem` 放进 `Typeahead` 的 `item` 插槽（原版叫 `renderItem`），多出来的文字用 `description` 传进去。外面那层负责高亮、选中和键盘的壳还在，所以行照样能用方向键走、能按回车选。

不传 `description` 时，会画数据里的 `item.description`，所以数据本身就带说明的话，这个属性可以省掉。

## 示例

常见的用法和不同的状态。

### 基础

下拉结果用 TypeaheadItem 来画，主文字下面多一行说明。原版放在 renderItem 里，让自定义结果长得和默认的一样。

```vue
<script setup lang="ts">
import { createStaticSource } from '@astryx-vue/core'
import { Typeahead, TypeaheadItem } from '@astryx-vue/core/Typeahead'
import { ref } from 'vue'

interface PersonItem {
  id: string
  label: string
  auxiliaryData: { role: string }
}

const people: PersonItem[] = [
  { id: '1', label: 'Alice Johnson', auxiliaryData: { role: 'Engineer' } },
  { id: '2', label: 'Bob Smith', auxiliaryData: { role: 'Designer' } },
  { id: '3', label: 'Charlie Brown', auxiliaryData: { role: 'Product Manager' } },
]

const source = createStaticSource(people)
const value = ref<PersonItem | null>(null)
</script>

<template>
  <div class="typeahead-item-field">
    <Typeahead
      v-model="value"
      label="Assignee"
      placeholder="Search people..."
      :search-source="source"
      :debounce-ms="0"
      has-entries-on-focus
    >
      <template #item="{ item }">
        <TypeaheadItem :item="item" :description="item.auxiliaryData.role" />
      </template>
    </Typeahead>
  </div>
</template>

<style scoped>
.typeahead-item-field {
  width: 20rem;
  max-width: 100%;
}
</style>
```

## 属性

| 属性 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| `item` | `SearchableItem` | — | 这一行要显示的那条搜索结果。必填，主文字取自它的 `label`。 |
| `description` | `string` | — | 主文字下面那行字。写了就盖过数据里的 `description`。 |
| `group` | `string` | — | 只为和原版属性名对上而接受。每一行自己不画分组标题，分组由下拉按 `item.auxiliaryData.group` 来排。 |
| `isDisabled` | `boolean` | `false` | 把这一行画成不可选。它还在列表里，方向键会跳过。 |

## 插槽

- `icon`：主文字前面的图标或头像。外面这层对读屏是隐藏的，所以图案不用起名。

另外，这一行自己也会读数据里的 `item.disabled`，所以某条结果不可选时，不传这个属性也会显示成不可选。