如何在（AngularJS）ui-select组件中设置搜索输入的最大长度？ [英] How to set a max length for the search input in (AngularJS) ui-select component?

问题描述

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

Suppose I have the following (very basic) code for a 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节点等，其中包含用于搜索和过滤选项的输入显示在列表中。

Now, this generates all the html nodes, etc, which contain an input for searching and filtering the options displayed on the list.

问题是：

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

How to set (in any variant) a maximum length for the input search ?

指令不提供任何内置数据属性。

因此，预期的行为是：如果我设置的最大长度为10个字符，当用户键入/复制+粘贴大于指定长度的字符串时，被输入搜索中的字符串被截断（但是，如果你可以提供一些其他解决方案，允许用户在输入搜索中只输入一定数量的字符，我真的很感激）

So, the expected behavior is: If I set a max length of 10 characters, when the user type/copy+paste a string larger than the specified length, the string in the input search, gets truncated (though, if you could provide me with some other solution which allows the user to input only certain numbers of characters in the input search, I would really appreciated)

我发现关于SO的这个相关问题，但它不适用于这种情况，因为我有无法通过 ng-model 或类似方式访问输入搜索中输入的值。

I found this related question on SO, but it's not applicable for this case, since I have no way to access to the value which is being typed on the input search via an ng-model or similar.

推荐答案

您可以将自定义属性指令添加到 ui-select 指令，然后搜索输入。在其中使用ui-select-search ，最后添加和HTML maxlength 属性...（ PLUNKER ）

You can add a custom attribute directive to the ui-select directive, then search for the input.ui-select-search inside it, and finally add and HTML maxlength attribute... (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>

DIRECTIVE

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 不支持它，你必须自己做...

Probably it isn't the best solution, but as you say if ui-select doesn't support it, you have to do it by yourself...

这篇关于如何在（AngularJS）ui-select组件中设置搜索输入的最大长度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！