npm 包 ember-aupac-x-numen-typeahead 使用教程

在现代 Web 开发中，前端框架和库早已不再是新鲜事物，但选择一个优秀的前端库仍然是提升开发效率和代码质量的关键一步。其中，Ember.js 是一个颇受欢迎的前端框架，它提供了一整套完整的 MVC 架构，让开发者可以更轻松地构建复杂的单页应用程序。而 npm 包 ember-aupac-x-numen-typeahead，提供了一个非常好用的自动完成（Autocomplete）组件，能够让你轻松地实现这一常见需求。

安装

使用 npm 安装 ember-aupac-x-numen-typeahead：

npm install ember-aupac-x-numen-typeahead --save

基本用法

导入组件：

import Typeahead from 'ember-aupac-x-numen-typeahead/components/au-typeahead';

在模板中使用组件：

{{au-typeahead
  url='/api/search'
  searchKey='query'
  displayKey='name'
}}

以上代码使用了服务器 API /api/search 来获取数据，搜索关键字在查询参数 query 中，而要在自动完成列表中显示的是返回数据中的 name 属性。

在组件内部，你可以通过声明属性来自定义各种选项：

export default Typeahead.extend({
  valueKey: 'id',
  debounce: 250,
  initSelection: function(results, callback) {
    callback(results[0]);
  }
});

• valueKey：标识所选择的项的属性，默认为 id。
• debounce：搜索时的节流间隔时间，默认为 300。
• initSelection：在首次打开自动完成菜单时，选中项的回调函数，默认为空。

进阶用法

设置数据源

使用函数为组件提供数据。

{{au-typeahead
  source=customData
}}

定义 customData 函数：

export default Ember.Controller.extend({
  customData: function(query, callback) {
    Ember.$.ajax('/data.json').then(function(content) {
      callback(content.data);
    });
  }
});

动态更新数据源

使用属性动态修改数据源。

{{au-typeahead
  url=apibase
  query=query
  searchKey=termKey
  displayKey=resultKey
}}

定义 query 属性，以响应式地修改 au-typeahead 组件使用的 API。

export default Ember.Controller.extend({
  query: function() {
    return `${this.get('apibase')}?q=${this.get('searchTerm')}`;
  }.property('searchTerm')
});

处理选中项

使用 onSelect 回调函数来处理选中项。

{{au-typeahead
  source=data
  displayKey='name'
  onSelect=handleSelect
}}

定义 handleSelect 方法，在选中某一项后实现处理逻辑。

export default Ember.Controller.extend({
  actions: {
    handleSelect: function(item) {
      alert(`You have selected ${item.name}.`);
    }
  }
});

结语

通过 ember-aupac-x-numen-typeahead 组件，你可以在 Ember.js 应用程序中非常容易地实现自动完成功能。不仅代码可维护性更高，还有着极大的开发效率提升。希望这篇教程对你有所帮助，并且能够引导你更深入地探究 ember-aupac-x-numen-typeahead 组件的更多功能。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fc481e8991b448dd24a