【问题标题】:AngularJS ui-select minimum-input-length not telling user to type in more charactersAngularJS ui-select minimum-input-length 不告诉用户输入更多字符
【发布时间】:2017-01-23 13:42:55
【问题描述】:

angularJS 的 ui-select (select2 主题) 是否有任何扩展甚至内置选项来显示信息,供用户在使用时输入更多字符以显示结果

 minimum-input-length=3

选项?我说的是像

这样的功能
formatInputTooShort(function() {return "Input more characters!;});

在 jQuery select2 (https://select2.github.io/select2/) 中。

这是使用我使用的库版本的基本选择设置的 plunker:http://plnkr.co/edit/K9alAMAzvUqCY7Or8RwY?p=preview

我已经在谷歌上搜索了很长时间,但找不到任何现有的解决方案。

对不起,不是很有效的代码 sn-ps,我必须使用它们才能包含 plunker sn-p。任何帮助或提示表示赞赏。

【问题讨论】:

    标签: angularjs select2 ui-select


    【解决方案1】:

    我在 UI 中遇到了类似的问题。我使用了angular-ui,现在将它用于我所有的下拉菜单(有一些)。虽然这不是原生 select2 选择,但可以使用 angular-ui 下拉菜单来制作下拉菜单,就像使用属性 theme="select2" 的 select2 一样

    要限制输入至少 3 个字符,请执行以下操作:

    控制器 JS:

    $scope.limitTitleSearch = 5000; //this should be initialised to more than the number of entries the dropdown holds
    $scope.checkTitle = function(lettersTyped){
            if(lettersTyped.length > 2){
                $scope.limitTitleSearch = 500;
            }else{
                $scope.limitTitleSearch = 0;
            }
        }
    

    HTML:

    用于显示输入超过 3 个字符的消息。喜欢:

    <ui-select-no-choice>
        Type at least 3 chars for options to load
    </ui-select-no-choice>
    

    并使用ui-select-choicesrefresh 属性调用该JS 函数。

    所以你的 HTML 看起来

    <ui-select-choices 
      refresh="checkTitle($select.search)"
      refresh-delay="1000"
      repeat="item in (itemArray | filter: $select.search limitTo: limitTitleSearch) track by item.id">
        <span ng-bind="item.name"></span>
    </ui-select-choices>
    //add <ui-select-no-choices code here
    

    希望这会有所帮助。 :)

    【讨论】:

    • 有一个用于限制最小用户输入长度的本机参数,称为最小输入长度,它吃字符数。我缺少 ui-select-no-choice 提供的选项。虽然这不是我想要达到的目标,但结合最小输入长度,它可能适用于大多数情况。
    【解决方案2】:

    请参阅以下与您的问题类似的链接:

    https://stackoverflow.com/a/41757481/4434112

    但在您的情况下,在 ui-select plugin.js 中并编辑模板“select2/select.tpl.html”(用于主题 select2)将占位符更改为您想要的消息

    placeholder="输入最少 3 个字符!"

    所以在模板中它将如下所示:

    <input type=\"search\" ........... placeholder=\"Input minimum 3 characters!\">
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2020-06-04
      • 1970-01-01
      • 1970-01-01
      • 2017-02-06
      • 2022-11-10
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多