下拉搜索自动筛选js插件

一个灵活且快速的自动完成JavaScript库，可与本机输入字段一起使用。它从JS 数组中获取数据，并在您输入文本时在下拉列表中突出显示。

主要特色

支持本地和远程数据源。
单选和多选。
键盘辅助功能。
数据排序和分组。
在结果中突出显示匹配的字符。
易于使用您自己的 CSS 进行自定义。

定义数据源

const myData = ['js', 'Java', 'PHP'],

初始化插件

new VanillaAutocompleter({
    inputElement: document.querySelector('.ac_input'),
    suggestionsBoxElement: document.querySelector('.ac_suggestions'),
    data: myData
});

全部配置参数

new VanillaAutocompleter({
    // highlights matched characters
    highlight: false,
    // enables multiselect
    multiple: false,
    // shows the selected items
    showSelected: false,
    // shows all suggestions when the input is empty
    allOnEmpty: false,
    // shows the suggestion list when the input gets focus.
    showOnFocus: false,
    // enables keyboard accessibility
    arrowNav: false,
    // debounce delay in ms
    debounceDelay: 0,
    // functions
    
    inputValue: function(suggestion){
      // ...
    },
    suggestionHTML: function(suggestion){
      // ...
    },
    matchTarget: function(data){
      // ...
    },
    isMatch: function(value, data){
      // ...
    },
    group: function(suggestion){
      // ...
    },
    sort: function(){
      // used to sort suggestions
    },
    sortGroup: function(){
      // used to sort groups
    },
});