@duskmoon-dev/el-autocomplete (日语)

用 Web 组件构建的自动补全建议输入组件 .

安装

bun add @duskmoon-dev/el-autocomplete

使用量

自动注册

import '@duskmoon-dev/el-autocomplete/register';

<el-dm-autocomplete placeholder="Search..."></el-dm-autocomplete>

手工登记

import { ElDmAutocomplete, register } from '@duskmoon-dev/el-autocomplete';

// Register with default tag name
register();

// Or register with custom tag name
customElements.define('my-autocomplete', ElDmAutocomplete);

通过 JavaScript 设置选项

const autocomplete = document.querySelector('el-dm-autocomplete');
autocomplete.options = [
  { value: 'apple', label: 'Apple' },
  { value: 'banana', label: 'Banana' },
  { value: 'cherry', label: 'Cherry' },
];

大小

属性

活动

实例

基础

<el-dm-autocomplete placeholder="Search fruits..."></el-dm-autocomplete>
<script>
  const ac = document.querySelector('el-dm-autocomplete');
  ac.options = [
    { value: 'apple', label: 'Apple' },
    { value: 'banana', label: 'Banana' },
    { value: 'cherry', label: 'Cherry' },
  ];
</script>

可清除

<el-dm-autocomplete clearable></el-dm-autocomplete>

多个选择

<el-dm-autocomplete multiple></el-dm-autocomplete>

自定义无结果文本

<el-dm-autocomplete no-results-text="Nothing found"></el-dm-autocomplete>

装入状态

const ac = document.querySelector('el-dm-autocomplete');
ac.addEventListener('input', async (e) => {
  ac.loading = true;
  const results = await fetchSuggestions(e.detail.value);
  ac.options = results;
  ac.loading = false;
});

许可证

麻省理工学院