使用 bootstrap/angularjs 的可编辑组合框答案

【问题标题】：Editable ComboBox using bootstrap/angularjs使用 bootstrap/angularjs 的可编辑组合框
【发布时间】：2014-03-04 23:06:08
【问题描述】：

我没有得到任何将组合框作为选择和输入的解决方案。这意味着如果每个填充列表中没有用户选择，那么使用应该能够输入他的选择值。用户的选择（选择或输入）应该在 angularjs 中设置和检索为 ng-model。

谢谢

【问题讨论】：

我想你想要一个指令。创建一个提琴手，可以为你添加一个指令

标签： angularjs twitter-bootstrap

【解决方案1】：

ui-select 看起来并不像我们都习惯的正确选择。所以这就是我在 Twitter Bootstrap 3 的帮助下最终做的事情：

http://jsfiddle.net/ruslans_uralovs/2brhd/1/

<div ng-app >
    <div class="row" ng-controller="ExampleController">
        <div class="col-xs-8 col-xs-offset-2">

            <form role="form">
                <div class="input-group">
                    <input type="text" class="form-control" ng-model="myColor.name">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
                        <ul id="color-dropdown-menu" class="dropdown-menu dropdown-menu-right" role="menu">
                            <li ng-repeat="color in colors" class="input-lg"><a href="#" ng-click="changeColor(color)">{{color.name}}</a></li>
                        </ul>
                    </div>
                </div>
        </div>
    </div>
</div>

来自爱尔兰的问候！

【讨论】：

我比 ui-select 更喜欢这个工具。这允许在 ui-select 仅查找的地方输入真实类型。
这样比 ui-select 好太多了。优雅而轻松。
这是在修改原始数据，所以我稍微调整了一下jsfiddle.net/ueuo4yho
如果我们输入新数据，下拉列表中选择的旧数据会更新/丢失。 @liteflier，即使你的解决方案也不起作用..
@Ruslans，这是一个不错的解决方案。刚刚在这里修复了新的数据更新下拉问题jsfiddle.net/3deepak/2brhd/462

【解决方案2】：

ui-select2 library 允许您通过指令使用select2。这提供了一些很棒的 UI 元素，可以满足您的要求。

总的来说，我还推荐Angular Modules 站点来查找各种有用的 Angular 库。

【讨论】：

问题很明显是关于能够输入一个不在 Select 列表中的值。我看不出 Select2 将如何帮助满足该要求。
例如访问我提供的 select2 链接并搜索/向下滚动到“标记支持”。从页面：“请注意，启用标记后，用户可以从预先存在的标签中进行选择，或者通过选择用户迄今为止在搜索框中键入的第一个选项来创建新标签。”这就是我使用它的方式，它确实允许您输入新值。
谢谢，马特。坦率地说，您引用的页面的措辞是如此混乱，我误解了它。感谢您的澄清！
谢谢！顺便说一句，ui-select2 library 已被弃用并替换为 ui-select library。

【解决方案3】：

使用 html5 你可以做到这一点：

    <input type=text list=browsers >
    <datalist id=browsers >
       <option> Google
       <option> IE9
    </datalist>

从这里得到它： http://www.scriptol.com/html5/combobox.php

【讨论】：

请注意，Safari 不支持此功能：https://caniuse.com/#feat=datalist

【解决方案4】：

我也在寻找同样的东西，但没有找到好的解决方案，所以我最终创建了angular-combo-box directive，它可以让你做你想做的事。这是一个例子。

angular.module('ngComboBoxExample', ['ngComboBox'])
  .controller('myController', function($scope) {
    $scope.options = [
      'Blue',
      'Red',
      'Pink',
      'Purple',
      'Green'
    ];
    $scope.color = '';
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://bradleytrager.github.io/angular-combo-box/bower_components/angular-combo-box/dist/angular-combo-box.min.js"></script>

<div ng-app="ngComboBoxExample">
  <div ng-controller="myController">
    <combo-box options="options" combo-model="color" label="--Select a Color--" other-label="A color not on the list...">
    </combo-box>
    <div>Selected Color: <span ng-bind="color"></span>
    </div>
  </div>
</div>

希望对您有所帮助！

【讨论】：

这个不错，只是缺少查找功能。而且您需要两个单独的字段。