允许在用户界面选择中手动输入文本

Question

我正在使用ui select中的选择框。一切都很好，但我想允许手动输入文本，不想限制用户使用列表中可用的值。如果我输入文本，它会正确过滤我的列表。但是，当我不点击一个元素并转到下一个字段时，我的文本将被丢弃。

有什么想法吗？

谢谢和问候，Alex

我不想显示我的代码，因为我认为它不正确，但它是被要求的：

<ui-select ng-model="formData[field.id].selected" theme="bootstrap">
    <ui-select-match placeholder="{{ lists[field.id].placeholder }}">{{$select.selected.text}}</ui-select-match>
    <ui-select-choices repeat="item in lists[field.id].list | filter: $select.search">
        <div ng-bind-html="item.text | highlight: $select.search"></div>
    </ui-select-choices>
</ui-select>

数据存储在formData[field.id].selected中。field.id是要显示的当前字段的编号（我正在动态生成表单）。假设它存储一个唯一的int值。

编辑2015年4月8日我的解决方案：我发现似乎没有一个等价的C#组合框。所以我继续使用两个独立的字段。这不是我想要的，但它现在有效：

<ui-select ng-model="formData[field.id].selected" theme="bootstrap">
    <ui-select-match placeholder="{{ lists[field.id].placeholder }}">{{$select.selected.text}}</ui-select-match>
    <ui-select-choices repeat="item in lists[field.id].list | filter: $select.search">
        <div ng-bind-html="item.text | highlight: $select.search"></div>
    </ui-select-choices>
</ui-select>
<?php echo __('Create a new element if value is not in list'); ?>
<div class="input-group">
    <span class="input-group-addon">
        <input type="checkbox" ng-model="disabled[field.id]">
    </span>
    <input type="text" value="" ng-disabled="!disabled[field.id]" class="form-control" ng-model="formData[field.id].newValue" />
</div>

Answer 1

这里有一个解决方案：

HTML-

<ui-select ng-model="superhero.selected">
  <ui-select-match placeholder="Select or search a superhero ...">{{$select.selected}}</ui-select-match>
  <ui-select-choices repeat="hero in getSuperheroes($select.search) | filter: $select.search">
    <div ng-bind="hero"></div>
  </ui-select-choices>
</ui-select>

控制器-

$scope.getSuperheroes = function(search) {
 var newSupes = $scope.superheroes.slice();
  if (search && newSupes.indexOf(search) === -1) {
    newSupes.unshift(search);
  }
  return newSupes;
}

这是CodePen解决方案。

Answer 2

我想我找到了一种允许用户创建新条目的方法。使用"on select"属性传递一个以$select为参数的函数，如下所示：

<ui-select ng-model="person.selected"
      theme="select2"
      on-select="peopleSel($select)"
      tagging
      reset-search-input="false"
      >
    <ui-select-match placeholder="Enter a name...">{{$select.selected.name}}</ui-select-match>
    <ui-select-choices repeat="sel in people | filter: {name: $select.search}">
    <div ng-bind-html="sel.name | highlight: $select.search"></div>
    </ui-select-choices>
  </ui-select>

然后创建一个函数，当clickTriggeredSelect变量为false时添加一个新条目：

$scope.peopleSel= function(sel) {
  if ( sel.search && ! sel.clickTriggeredSelect ) {
    if ( ! sel.selected || sel.selected.name != sel.search ) {
      //Search for an existing entry for the given name
      var newOne= personSearch( sel.search ); 
      if ( newOne === null ) {
        //Create a new entry since one does not exist
        newOne= { name: sel.search, email: 'none', country: 'unknown' };
        $scope.people.push( newOne );
      }
      //Make the found or created entry the selected one
      sel.selected= newOne;
    }
  }
  sel.search= ''; //optional clearing of search pattern
};

请注意，此处未提供personSearch定义。此外，如果首选空白条目，则可以使用这种测试clickTriggeredSelect的方法来允许用户取消选择字段。

PVC

Answer 3

您可以使用标记属性，如文档中所述：https://github.com/angular-ui/ui-select/wiki/ui-select

<ui-select multiple tagging tagging-label="(custom 'new' label)" ng-model="multipleDemo.colors">
...
</ui-select>

Answer 4

我已经分叉了ui select项目，通过允许自由文本属性允许此功能

<ui-select allow-free-text="true" ng-model="ctrl.freeTextDemo.color2" theme="bootstrap" style="width: 800px;" title="Choose a color">
    <ui-select-match placeholder="Select color...">{{$select.selected}}</ui-select-match>
    <ui-select-choices repeat="color in ctrl.availableColors | filter: $select.search">
      <div ng-bind-html="color | highlight: $select.search"></div>
    </ui-select-choices>
</ui-select>

这是plnker

在我的pull请求被angular ui团队接受之前，您可以获得ui select构建，其中包括我在自己的repo 上的补丁

Answer 5

我使用keyup添加一个新选项，表示输入的文本。使用这种方法，如果用户按下enter，他们可以选择到目前为止已经输入的内容（默认活动项目是第一个项目）。

当数据列表包含纯文本或对象（需要属性value-prop）时，这两种情况都支持。

指令：

commonApp.directive("uiSelectFreeText", function () {
    return {
        restrict: "A",
        require: "uiSelect",
        link: function (scope, element, attrs, $select) {
            var searchInput = element.querySelectorAll("input.ui-select-search");
            if (searchInput.length !== 1) {
                console.log("Error! Input not found.");
                return;
            }
            searchInput.on("keyup", function () {
                var valueProp = attrs["valueProp"];
                var addNewObjOption = function () {
                    // add new item represent free text option
                    var newOption = { isFreeText: true };
                    newOption[valueProp] = $select.search;
                    $select.items.unshift(newOption);
                };
                if ($select.items.length > 0) {
                    var firstItem = $select.items[0];
                    if (valueProp) {
                        // items is list of Object
                        if (firstItem.isFreeText) {
                            firstItem[valueProp] = $select.search;
                        } else {
                            addNewObjOption();
                        }
                    } else {
                        // items is list of string
                        if (firstItem === $select.search) {
                            return;
                        } else {
                            $select.items.push($select.search);
                        }
                    }
                } else {
                    if (valueProp) {
                        addNewObjOption();
                    } else {
                        // items is list of string
                        $select.items.push($select.search);
                    }
                }
            });
        }
    };
});

HTML:

<ui-select class="ui-select-control"
           ui-select-free-text value-prop="Label"
           ng-model="keyword">
</ui-select>