如何在(AngularJS)ui-select组件中设置搜索输入的最大长度？

Question

假设我有以下（非常基本的）代码用于 ui-select

<ui-select ng-model="vm.selected">
    <ui-select-match>
        <span ng-bind="$select.selected.label"></span>
    </ui-select-match>
    <ui-select-choices repeat="item in vm.items">
        <span ng-bind="item.label"></span>
    </ui-select-choices>
</ui-select>

现在，这会生成所有 html 节点等，其中包含用于搜索和过滤列表中显示的选项的输入。

问题是：

如何设置（在任何变体中）输入搜索的最大长度？

指令不提供任何用于这样做的内置数据属性。

因此，预期的行为是：如果我将最大长度设置为 10 个字符，当用户 type/copy+粘贴大于指定长度的字符串时，输入搜索中的字符串将被截断（不过，如果您能为我提供一些其他解决方案，允许用户在输入搜索中仅输入特定数量的字符，我将不胜感激）

我找到了，但它不适用于这种情况，因为我无法访问通过 ng-model 或类似方式在输入搜索中键入的值。

Answer 1

可以在ui-select指令中添加自定义属性指令，然后在里面搜索input.ui-select-search，最后添加HTMLmaxlength属性.. . (PLUNKER)

HTML

<ui-select ng-model="vm.selected" maxlen="15">
    <ui-select-match>
        <span ng-bind="$select.selected.label"></span>
    </ui-select-match>
    <ui-select-choices repeat="item in vm.items">
        <span ng-bind="item.label"></span>
    </ui-select-choices>
</ui-select>

指令

app.directive('maxlen', function() {
  return {
    restrict: 'A',
    link: function(scope, element, attr) {
      var $uiSelect = angular.element(element[0].querySelector('.ui-select-search'));
      $uiSelect.attr("maxlength", attr.maxlen);
    }
  }
});

可能这不是最好的解决方案，但是正如你所说如果ui-select不支持它，你必须自己做...

如何在(AngularJS)ui-select组件中设置搜索输入的最大长度？

How to set a max length for the search input in (AngularJS) ui-select component?

html

javascript

jquery

angularjs

ui-select