像使用typeahead和Angularjs的Outlook一样自动完成

Question

我想创建一个文本框，使用ui-angular的预先输入自动完成功能，我希望每次输入密钥“;”时自动填充都能正常工作，例如： 当我在文本框中输入“anny”时，会出现包含“anny”的所有联系电子邮件地址，我选择了我想要的那个以及当我键入“;”时我可以再次使用自动复制。（比如Outlook）...我已经创建了一个文本框但它只适用于电子邮件地址

<div class="form-group" ng-class="{'has-error':NewRequest.BeneficiaryId.$invalid}">
     <label for="inputEmail3" class="col-lg-2 control-label"> Email:</label>
     <div class="col-sm-10">
         <input type="text" name="BeneficiaryId" 
                ng-model="Ticket.BeneficiaryId" placeholder="Email" 
                typeahead="address as address.Email for address in Form.autoComplete($viewValue) | filter:$viewValue" 
                typeahead-loading=" loadinglocations" 
                class="form-control" required>

         <i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"> </i>
     </div>

这是我的自动填充服务

services.service('Form', function ($http, $q, $modal) {
this.autoComplete = function (val) {
    var deferred = $q.defer();

    $http.get("../api/Employee/getAutocomplet", {
        params: {sSearch: val }
    }).then(function (response) {

        var addresses = [];
        angular.forEach(response.data, function (item) {
            addresses.push(item);
        });
        deferred.resolve(addresses);
    });
    return deferred.promise;
};

Answer 1

您正在寻找的内容有时被称为“带有typeahead的内联多选”。流行的非Angular实现包括Chosen和Select2。要了解各种实现如何工作，我建议查看其源代码并检查DOM元素。

我一直想完成我的post here，详细说明了它的工作原理以及如何在AngularJS中实现它。要点是：

• 将键盘笔划绑定到选择项目，例如您的案件中enter，tab或;
• 将项目推送到所选项目数组
• ngRepeat数组并呈现为input左侧的内联列表，将input推到
• 清除input内容并将焦点保持在其中，这样您就可以继续输入更多内容

你可以使用Angular implementation here和demo here。