Supongamos que tengo el siguiente código (muy básico) para una selección de interfaz de usuario
<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>Ahora, esto genera todos los nodos html, etc., que contienen una entrada para buscar y filtrar las opciones que se muestran en la lista.
El problema es:
¿Cómo establecer (en cualquier variante) una longitud máxima para la búsqueda de entrada?
La directiva no ofrece ningún atributo de datos incorporado para hacerlo.
Entonces, el comportamiento esperado es: si configuro una longitud máxima de 10 caracteres, cuando el usuario escribe/copia y pega una cadena más grande que la longitud especificada, la cadena en la búsqueda de entrada se trunca (aunque, si pudiera proporcionarme con alguna otra solución que le permita al usuario ingresar solo cierta cantidad de caracteres en la búsqueda de entrada, realmente lo agradecería)
Encontré esta pregunta relacionada en SO , pero no es aplicable para este caso, ya que no tengo forma de acceder al valor que se está escribiendo en la búsqueda de entrada a través de un ng-model o similar.
Puede agregar una directiva de atributos personalizados a la directiva ui-select , luego buscar input.ui-select-search dentro de ella y finalmente agregar un atributo de longitud máxima HTML... ( PLUNKER maxlength
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>DIRECTIVA
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); } } }); Probablemente no sea la mejor solución, pero como dices, si ui-select no lo admite, debes hacerlo tú mismo ...