折旧

此组件已移至 anypoint-web-components/awc。 。 。 .

本构成部分以材料设计清单为基础.

任意点网络组件是允许在开源项目中构建任意点启用的UI的组件集.

该要素使输入字段的建议清单易于查阅.

使用量

安装

npm install --save @anypoint-web-components/anypoint-autocomplete

在 HTML 文档中

<html>
  <head>
    <script type="module">
      import '@anypoint-web-components/anypoint-autocomplete/anypoint-autocomplete.js';
      import '@anypoint-web-components/anypoint-input/anypoint-input.js';
    </script>
  </head>
  <body>
    <div class="parent">
      <anypoint-input id="targetInput"></anypoint-input>
      <anypoint-autocomplete target="targetInput"></anypoint-autocomplete>
    </div>

    <script>
    {
      document.querySelector('anypoint-autocomplete').source = [
        'a',
        'b',
        'c',
        'd'
      ];
    }
    </script>
  </body>
</html>

同步建议

当输入值改变自动完成调度时 query 活动。 您的应用程序应该处理此事件, 为用户生成建议, 并设置 source 属性.

向用户显示您可以设置的建议同步 loader 属性。 它使一个进步栏,直到源财产改变.

<div class="parent">
  <anypoint-input id="targetInput"></anypoint-input>
  <anypoint-autocomplete target="targetInput"></anypoint-autocomplete>
</div>
<script>
{
  document.querySelector('anypoint-autocomplete').onquery = (e) => {
    const { value } = e.detail;
    const suggestions = await getAsyncSuggestions(value);
    e.target.source = suggestions;
  };
}
</script>

在一个LitElement中

import { LitElement, html } from 'lit-element';
import '@anypoint-web-components/anypoint-autocomplete/anypoint-autocomplete.js';
import '@anypoint-web-components/anypoint-input/anypoint-input.js';

class SimpleElement extends ControlStateMixin(ButtonStateMixin(LitElement)) {
  render() {
    return html`
    <div class="parent">
      <anypoint-input id="targetInput"></anypoint-input>
      <anypoint-autocomplete
        target="targetInput"
        loader
        .source="${this.suggestions}"
        @query="${this._handleQuery}"></anypoint-autocomplete>
    </div>
    `;
  }

  async _handleQuery(e) {
    const { value } = e.detail;
    this.suggestions = await getAsyncSuggestions(value);
  }
}
window.customElements.define('simple-element', SimpleElement);

建议模式

{
  "value": "Required, string. The value to insert into the input field",
  "label": "Optional, string. When set this will be used as the drop down list label",
  "description": "Optional, string. When set it renders a second line for the suggestion with help message. Keep it short!"
}

无障碍

自动完成元素遵循 W3C 准则 ARIA 1. 1 有 Listbox 弹出式组合框。该元素可以支持屏幕阅读器.

由于屏幕阅读器如何剖析页面内容和关联角色,元素将建议作为自定义元素的儿童元素. 这意味着您可能会不慎给您主 CSS 文件列表项样式 .

因为自動完成元素和文本输入需要具有特定角色的母元素,所以将两个元素都放入单子母体内. 该元素注意在所有元素上设定角色和aria属性.

你的密码

<div class="parent">
  <anypoint-input id="targetInput"></anypoint-input>
  <anypoint-autocomplete target="targetInput"></anypoint-autocomplete>
</div>

初始化后

<div
  class="parent"
  role="combobox"
  aria-label="Text input with list suggestions"
  aria-expanded="true"
  aria-owns="paperAutocompleteInput7302"
  aria-haspopup="listbox">
  <anypoint-input
    id="targetInput"
    aria-autocomplete="list"
    autocomplete="off"
    aria-haspopup="true"
    aria-controls="paperAutocompleteInput63418"></anypoint-input>
  <anypoint-autocomplete
    target="targetInput"
    id="paperAutocompleteInput7302"
    aria-controls="paperAutocompleteInput63418"
    >
    <anypoint-dropdown>
      <anypoint-listbox
        aria-label="Use arrows and enter to select list item. Escape to close the list."
        role="listbox"
        aria-activedescendant=""
        id="paperAutocompleteInput63418"></anypoint-listbox>
    </anypoint-dropdown>
  </anypoint-autocomplete>
</div>

你可以设置 aria-label 以覆盖默认信件。 然而,其他属性总是被改变以符合无障碍要求.

发展

git clone https://github.com/anypoint-web-components/anypoint-autocomplete
cd anypoint-autocomplete
npm install

本地运行演示

npm start

运行测试

npm test