JQuery Select2多选自动完成下拉框多实例自动完成失效问题

你遇到的问题根源其实很清晰：在ng-repeat循环里，你给所有<select>元素都设置了相同的id="LocationMapID"。HTML规范里id是全局唯一标识，当你用Select2通过id选择器初始化时，只会对第一个匹配到的元素生效，后面的下拉框根本没被正确绑定Select2，自然自动完成功能就失效了。

下面给你几个可行的解决步骤：

1. 移除重复ID，改用Class标识 #

把所有<select>的重复id去掉，换成统一的class（比如location-select），这样我们可以通过class选择器批量初始化，同时保证每个元素都是独立的：

<div class="col-lg-6" ng-repeat="locationtype in allLocationTypes">
    <b><label ng-bind="locationtype.Type"></label></b>
    <div class="form-group">
        <!-- 去掉重复id，添加统一class -->
        <select class="form-control location-select" multiple="multiple" placeholder="Select Location" style="width:100%">
            <option value="" disabled="disabled">--Select Location--</option>
            <option ng-repeat="location in allLocations | filter :filterLocations(locationtype.ID) " value="{{location.ChildLocationID}}">
                {{location.ParentLocation + '-' + location.ChildLocation}}
            </option>
        </select>
    </div>
</div>

2. 正确初始化Select2（适配Angular的DOM渲染时机） #

因为你用了Angular的ng-repeat，DOM元素是动态生成的，直接在页面加载时调用Select2初始化可能会因为元素还没渲染完成而失效。推荐两种方式：

方式一：使用$timeout确保DOM渲染完成 #

在你的Angular控制器里，等数据加载完成后，用$timeout延迟初始化Select2，确保所有ng-repeat生成的元素都已存在：

// 假设这是你的控制器代码
app.controller('YourController', ['$scope', '$timeout', function($scope, $timeout) {
    // 先加载allLocationTypes和allLocations数据...
    
    // 数据加载完成后，延迟初始化Select2
    $timeout(function() {
        $('.location-select').select2({
            placeholder: "Select Location",
            allowClear: true // 可选，添加清空功能
        });
    });
}]);

方式二：自定义Angular指令封装Select2（更优雅的方式） #

如果项目里经常用到Select2，最好封装成Angular指令，这样能更好地和Angular的生命周期结合，避免DOM操作的问题：

app.directive('select2', function() {
    return {
        restrict: 'C', // 匹配class
        link: function(scope, element) {
            // 初始化Select2
            element.select2({
                placeholder: "Select Location",
                allowClear: true
            });

            // 监听作用域销毁，销毁Select2实例避免内存泄漏
            scope.$on('$destroy', function() {
                element.select2('destroy');
            });
        }
    };
});

之后只需要给<select>加上select2这个class，指令会自动处理初始化和销毁逻辑。

额外注意事项 #

• 确保已正确引入Select2的CSS和JS文件，且版本与jQuery兼容
• 如果filterLocations过滤器会动态改变下拉选项，记得在数据更新后触发Select2的refresh方法：

  $scope.$watch('allLocations', function(newVal) {
      if (newVal) {
          $timeout(function() {
              $('.location-select').select2('refresh');
          });
      }
  }, true);
  

内容的提问来源于stack exchange，提问作者Muttu B C