angular-bootstrap-autocomplete 是一个 AngularJS 模块，用于为文本框提供自动完成提示。它基于 Bootstrap 样式，并可使用 AngularJS 内置的 $http 服务，从服务器获取选项列表。
安装和配置
安装 angular-bootstrap-autocomplete 可通过 npm 命令：
npm install angular-bootstrap-autocomplete
在应用程序中引入 js 文件，并将 ui.bootstrap 模块作为依赖项：
<script src="node_modules/angular-bootstrap-autocomplete/dist/angular-bootstrap-autocomplete.js"></script>
angular.module('myApp', ['ui.bootstrap']);使用
以下是一个简单的例子，它演示了如何将 angular-bootstrap-autocomplete 用于文本框 input 元素：
<input type="text" placeholder="输入关键字" ng-model="selected" typeahead="item for item in items | filter:$viewValue | limitTo:8" typeahead-min-length="0">
在上面的例子中，typeahead 指令接受一个 AngularJS 表达式，该表达式返回一个数组。输入框将显示该数组中的每个元素。 typeahead-min-length 属性确定文本框的最小输入字符数，以开始自动完成提示。
Angular-Bootstrap-Autocomplete 的独有特性
自动完成提示有许多选项。下面是 angular-bootstrap-autocomplete 独有的一些特性：
表现自定义
您可以使用 Bootstrap 样式，并根据需要自定义自动完成提示列。
<script type="text/ng-template" id="customTemplate.html">
<a>
<span ng-bind-html="match.label | uibTypeaheadHighlight:query"></span>
</a>
</script>
<input type="text" placeholder="输入关键字" ng-model="selected" typeahead="item for item in items | filter:$viewValue | limitTo:8" typeahead-min-length="0"
typeahead-template-url="customTemplate.html">在上面的例子中，我们定义了一个模板，它使用 HTML 实现我们的自定义外观。typeahead-template-url 属性指向我们定义的模板。
从服务器检索数据
传统的自动完成提示将在客户端的 JavaScript 中运行，这可能会导致性能问题，特别是在大型数据集的情况下。使用 AngularJS $http 服务，您可以从服务器检索选项列表。
<input type="text" placeholder="输入国家名" ng-model="selected" typeahead="item for item in getCountries($viewValue)" typeahead-min-length="0" class="form-control">
在上面的例子中，我们定义了一个名为 getCountries 的函数，该函数中包含 $http 服务并返回一个 promise，该 promise 解决为从服务器返回的选项数组。$viewValue 变量包含当前输入文本框的值。
总结
angular-bootstrap-autocomplete 为文本框提供了优雅的自动完成功能，并可通过 Bootstrap 样式自定义。除此之外，这个库还有许多其他的高级功能，例如使用服务器数据，这里只是简单介绍了一些使用基础。我鼓励你去查看文档并深入了解。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005668881e8991b448e2bfc