我想创建一个文本框,使用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.