auto-complete jquery doesn't work with with ngmodel and ngrepeat (angular)

Question

I am trying to use autocomplete function of jquery inside my angular controller and that doesn't work may be because of ng-model or ng-repeat I don't know exactly ^^

My html file contains this code

<div ng-if="data._id" data-ng-controller="AddonExclusivityCtrl" ng-init="init()">
<hr>
<label>Add an addon that is not bookable with this one:</label>
<input id="addon-search" type="text" 
ng-model="addon_filter_name" 
class="form-control" placeholder="Search for an addon...">
<br>
<div ng-show="data._embedded.exclusive_with && data._embedded.exclusive_with.length > 0">
<label>Not bookable with:</label>
<ul>
<li ng-repeat="exclusive_with in data._embedded.exclusive_with">
{{exclusive_with.description}} <a href="#" 
ng-click="removeExclusivity($event, exclusive_with)" 
title="Remove mutual exclusivity">
<span class="glyphicon glyphicon-trash"></span></a>
</li>
</ul>
</div>
</div>

And my controller contains the following code :

var lastFetchedAddonList = [];

$scope.init = function() {
    $('#addon-search').autocomplete({
        source: function( request, response ) {
            Addon.query({ name: request.term, global: null }, function(results) {
                lastFetchedAddonList = results.data;

                var suggestions = [];
                angular.forEach(results.data, function(v, i){
                   suggestions.push({ label: v.description, value: i });
                });
                response(suggestions);
            });
        },
        select: function( event, ui ) {
            event.preventDefault();
            if ($scope.data._embedded === undefined) {
                $scope.data._embedded = [];
            }

            if ($scope.data._embedded.exclusive_with === undefined) {
                $scope.data._embedded.exclusive_with = [];
            }

            var addon = lastFetchedAddonList[ui.item.value];

            var exclusiveAddon = new AddonExclusivity();
            exclusiveAddon._id = $scope.data._id;
            exclusiveAddon.exclusive_with_addon = addon.name;

            AddonExclusivity.save(exclusiveAddon, function(){
                $rootScope.addNotification('Added ' + addon.description + ' as mutually exclusive with ' + $scope.data.description);
                $scope.data._embedded.exclusive_with.push(addon);
                $('#addon-search').val('');
            });

            return false;
        }
    });
};

$scope.removeExclusivity = function($event, addon) {
    $event.preventDefault();
    AddonExclusivity.delete({ id: $scope.data._id, other_id: addon.name }, function(){
        $rootScope.addNotification('Addon ' + addon.description + ' is not anymore mutually exclusive with ' + $scope.data.description);
        $scope.data._embedded.exclusive_with.splice($scope.data._embedded.exclusive_with.indexOf(addon), 1);
    });
};

Thank you for your help in advance :)

Cheezy Code · Accepted Answer · 2016-05-10 16:56:41Z

2

Instead of using jquery autocomplete, you can use plain html to create your autocomplete.

See this post here

answered May 10, 2016 at 16:56

Cheezy Code

1,7151 gold badge14 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Akram Rekik Over a year ago

this is very simple autocomplete !! I am looking what'is wrong with my code ^^

Basit Over a year ago

Best suit my need

hoogw · Accepted Answer · 2017-07-28 22:24:27Z

0

I have the same problem. The reason is angularjs repeat ng-model tag the id is always the same.

So only the first tag with that id works fine with autocomplete. but the second and after with same id would not work.

I am looking at angular-module angucomplete-alt angucomplete-alt

This should solve your problem.

answered Jul 28, 2017 at 22:24

hoogw

5,6071 gold badge46 silver badges37 bronze badges

Collectives™ on Stack Overflow

auto-complete jquery doesn't work with with ngmodel and ngrepeat (angular)

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related