当前位置:主页 > JavsScript库 > 表单 >

具有异步数据获取的强大自动完成功能 - autocomplete.js
栏目分类:表单   发布日期:2021-08-15   浏览次数:

一个功能丰富、高度可定制、完全可访问的自动完成库,用 Vanilla JavaScript 编写。

特征:

  • 支持单选和多选。

  • 支持异步数据获取。

  • 允许您对结果进行分组。

  • 允许您将复选框添加到结果的开头。

如何使用它:

1.下载autocomplete.css&autocomplete.min.js导入文档。

<link rel="stylesheet" href="/path/to/autocomplete.css" />

<script src="/path/to/autocomplete.min.js"></script>

2. 为仍在使用旧浏览器的用户加载 polyfill。

if (!('Promise' in window)) {

  var script = document.createElement('script');

  script.src =

    'https://polyfill.io/v3/polyfill.min.js?features=Promise%2CElement.prototype.closest';

  document.getElementsByTagName('head')[0].appendChild(script);

}

3. 初始化autocomplete.js目标输入字段并从外部数据源获取数据,如下所示:

<input type="text" id="example" placeholder="Type Something" />

new Autocomplete('example', {

    onSearch: ({ currentValue }) => {

      const api = `/path/to/datasource/`;

      return new Promise((resolve) => {

        fetch(api)

          .then((response) => response.json())

          .then((data) => {

            resolve(data);

          })

          .catch((error) => {

            console.error(error);

          });

      });

    },

    onResults: ({ matches }) => {

      return matches

        .map(el => {

          return `

            <li>${el.name}</li>`;

        }).join('');

    }

});

4.库也支持本地数据。

new Autocomplete('local', {

    onSearch: ({ currentValue }) => {

      const data = [

        { "name": "JavaScript" },

        { "name": "CSS" },

        { "name": "HTML" },

        { "name": "Python" }

      ];

      return data.sort((a, b) => a.name.localeCompare(b.name))

        .filter(element => {

          return element.name.match(new RegExp(currentValue, 'i'))

        })

    },

    onResults: ({ matches }) => {

      return matches

        .map(el => {

          return `

            <li>${el.name}</li>`;

        }).join('');

    }

});


5. 可能的选项和功能。

new Autocomplete('example', {

    // 搜索延迟

    delay: 500,

    // 显示清除按钮

    clearButton: true,

    // 自动选择第一个结果

    selectFirst: false,

    // 在您浏览结果时向输入字段添加文本使用向上/向下光标

    insertToInput: false,

    // 输入以触发搜索的字符数

    howManyCharacters: 1,

    // 您将用来命名组元素的类的名称

    classGroup: 'group-by',

    // 禁用close on select

    disableCloseOnSelect: false,

    // 判断是否缓存输入字段中输入的字符

    cache: false,

    onResults = () => { },

    onSearch = () => { },

    onSubmit = () => { },

    onOpened = () => { },

    onReset = () => { },

    noResults = () => { },

    onSelectedItem = () => { },

});


变更日志:

v1.1.0 (08/14/2021)

  • 添加了新示例

v1.1.0 (08/11/2021)

  • 壮举:新的参数缓存

v1.0.44 (06/30/2021)

  • 琐事:删除未使用的插件“rollup-plugin-postcss”


官方网站:https://github.com/tomik23/autocomplete

相关热词: autocomplete

声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库