Framework7新版学习笔记之 自动补全输入框(AutoComplete)

一：自动补全输入框

我们可以定义一种具有自动补全功能的输入框，预先设定一些可选值作为自动补全内容。当用户输入可选值的部分内容时，就会在下面自动列出匹配的选项，点击即可自动填充对应的选项。

二：定义自动补全输入框

<div class="item-input-wrap">
      <input id="autocomplete-dropdown" type="text" placeholder="提示文本">
</div>

三：在js中创建候补选项，并且为输入框创建自动补全控件

var array =[‘选项1‘,‘选项2‘,...] //创建候补选项

//创建自动补全
var autocompleteDropdownSimple = app.autocomplete.create({
  inputEl: ‘#autocomplete-dropdown‘,//自动补全输入框id
  openIn: ‘dropdown‘,
  source: function (query, render) {//query是输入框接收到的检索关键字，render是渲染器
    var results = [];//候补结果
    if (query.length === 0) {
      render(results);
      return;
    }
    // 1:根据检索关键字查找匹配的候补结果
    for (var i = 0; i < array.length; i++) {
      if (array[i].toLowerCase().indexOf(query.toLowerCase()) >= 0)
           results.push(array[i]);
    }
    // 2:把匹配结果渲染到输入框下方供选择
    render(results);
  }
});

四：各种自动补全输入框效果案例

http://framework7.io/docs/autocomplete.html

原文地址：https://www.cnblogs.com/ygj0930/p/8460364.html