自動完成像Outlook使用typeahead和Angularjs

我想創建一個文本框，使用ui-angular的typeahead自動完成，我希望自動運行每次輸入密鑰時都有效「;」例如：當我輸入「anny 「在文本框中出現所有包含」anny「的聯繫人電子郵件地址，我選擇一個我想要的和當我輸入密鑰」;「我可以再次使用autocomlementation。（如Outlook）......我已經創建了一個文本框，但它僅適用於電子郵件地址自動完成像Outlook使用typeahead和Angularjs

<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; 
};

來源

2014-03-24 user3347664

可能重複（http://stackoverflow.com/questions/22693325/angularjs-typeahead-multi-select-tags） – sj7

您正在尋找的內容有時被稱爲「帶鍵入的內聯多選」。流行的非角度實現包括Chosen和Select2。爲了理解各種實現如何工作，我建議查看它的源代碼並檢查DOM元素。

我一直有意完成我的post here，它詳細說明了這是如何工作的以及如何在AngularJS中實現它。要點是：

將鍵盤筆劃綁定到選擇項目，例如， enter，tab或;你的情況
推動項目進入所選項目
ngRepeat陣列並呈現爲直列列表的input左側，這推動input在
清除input內容以及如何保持專注的數組其中，這允許你繼續打字更多

你可以這個角implementation here和demo here。 [AngularJS預輸入+多選擇標籤]的

ui-multiselect

來源

2014-03-24 17:25:00

謝謝!!這是非常相似，但我怎麼能加載我的數據，因爲他們不是固定的（儘可能多的數據）我怎麼能告訴他，data =地址作爲地址爲address.email在FormField.autoCompletePerson（$ viewValue）|過濾器：$ viewValue – user3347664

關於數據，電子郵件地址列表可能不是固定的，但數據結構應該是。如果您正在從數據庫中提取和過濾數據，則該邏輯應該位於服務中，那麼控制器應該將電子郵件分配給一個對象。編譯模板時，電子郵件對象的結構不應更改。但是，如果沒有更大的上下文，你的html模板的編寫方式很難理解。你在使用供應商模塊嗎？ 'typeahead'屬性是做什麼的？你如何顯示電子郵件列表？ –

自動完成像Outlook使用typeahead和Angularjs

回答

相關問題