ui select angularjs set maxlength for input value (ui select match)

Question

I want an extra attribute just like "Placeholder" is passing from ui select match. I want to set maxlength of select input. I can set it through select.min.js adding attribute maxlength="" but i think making change to lib. file is not a solution.

Just like i have adde maxlength="500" in input

please help me around.

Thanks

Answer 1

You can limit your collection using the angular's limitTo filter. Look at the limitTo reference.

Answer 2

As per my understanding, you are using ui-select with tagging (as combo-box).

in this to achieve your desired functionality:

go to ui-select plugin.js and edit the template "select2/select.tpl.html" (for theme select2):

ng-attr-maxlength="{{$select.tagging.isActivated ? 50 : ''}}"

add the above line to template as shown here:

<input type=\"search\" ........... ng-attr-maxlength=\"{{$select.tagging.isActivated ? 500 : ''}}\">

if you want to restrict input search itself then directly add maxlength attribute:

<input type=\"search\" ........... maxlength=\"500\">

Hope this helps. :-)

Answer 3

You can change attribute through templateCache

.run(function($templateCache) {
        $templateCache.put("bootstrap/select-multiple.tpl.html","<div class=\"ui-select-container ui-select-multiple ui-select-bootstrap dropdown form-control\" ng-class=\"{open: $select.open}\"><div><div class=\"ui-select-match\"></div><input maxlength='5' type=\"search\" autocomplete=\"off\" autocorrect=\"off\" autocapitalize=\"off\" spellcheck=\"false\" class=\"ui-select-search input-xs\" placeholder=\"{{$selectMultiple.getPlaceholder()}}\" ng-disabled=\"$select.disabled\" ng-click=\"$select.activate()\" ng-model=\"$select.search\" role=\"combobox\" aria-expanded=\"{{$select.open}}\" aria-label=\"{{$select.baseTitle}}\" ng-class=\"{\'spinner\': $select.refreshing}\" ondrop=\"return false;\"></div><div class=\"ui-select-choices\"></div><div class=\"ui-select-no-choice\"></div></div>");
    })

Original templates can be find on bottom of file select.js