CODEWITHSUNDEEP
angularjsautocompletetypeahead
user3347664
user3347664

Reputation: 49

Autocomplete like Outlook using typeahead and Angularjs

I want to create a textbox that utlise the typeahead Autocomplete of ui-angular, I want that the autocomlementation works every time I type the key ";"for example: when I type "anny" in the textbox all contact email address containing "anny" appears, I select the one I want and when I type the key ";" I can again use autocomlementation.(like Outlook)... I have already created a textbox but it only works for an email address

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

And that's my service for autocomplete

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

Upvotes: 4

Views: 3339

Answers (1)

Ray Shan
Ray Shan

Reputation: 1675

What you're looking for is sometimes called "inline multiselect with typeahead". Popular non-Angular implementations include Chosen and Select2. To understand how various implementations work I recommend viewing its source and inspecting the DOM elements.

I've been meaning to finish my post here, which details how this works and how to implement it in AngularJS. The gist is:

  • Bind keyboard strokes to selecting the item, e.g. enter, tab or ; in your case
  • Push the item into an array of selected items
  • ngRepeat the array and render as inline list to the left of input, which pushes input over
  • Clear input content and keeping focus within it, this allows you to keep typing for more

You can this Angular implementation here and demo here.

ui-multiselect

Upvotes: 2

Related Questions