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

2023年10月7日 272次阅读

我想创建一个文本框,使用ui-angular的预先输入自动完成功能,我希望每次输入密钥“;”时自动编译都能正常工作,例如：

当我在文本框中输入“anny”时,会出现包含“anny”的所有联系电子邮件地址,我选择了我想要的那个以及当我键入“;”时我可以再次使用autocomlementation.(比如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;
};

最佳答案 你正在寻找的东西有时被称为“带有先行的内联多选”.流行的非Angular实现包括
Chosen和
Select2.为了理解各种实现如何工作,我建议查看其源代码并检查DOM元素.

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

>将键盘笔划绑定到选择项目,例如输入,制表符或;在你的情况下
>将项目推入选定项目的数组中
> ng重复数组并渲染为输入左侧的内联列表,将输入推送过来
>清除输入内容并将焦点保持在其中,这使您可以继续输入更多内容

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

点赞