在 ngx-chips 中单击选项卡上的下拉列表项答案

【问题标题】：Select Drop down list item on Tab click in ngx-chips在 ngx-chips 中单击选项卡上的下拉列表项
【发布时间】：2019-07-10 06:58:56
【问题描述】：

我们将 ngx-chips 用于自动完成文本框，我们从远程源获取数据。如果我们复制粘贴一个项目并按 Tab 按钮，我们需要选择单个项目。但这不起作用。

我们将不胜感激。

我们的代码如下

 <tag-input formControlName="Tag"
            placeholder = "select"
            secondaryPlaceholder = "select"
            [validators]="Validator"
            [onlyFromAutocomplete]="true"
            [onTextChangeDebounce] = "1000"
            (keyup)="onSearchType($event.target.value)"            
            class="tag-input-class tag-inp"
            >
                <tag-input-dropdown
                  [autocompleteItems]="List"
                  [dynamicUpdate]="true"
                  [appendToBody]="true"
                  [showDropdownIfEmpty]="false"
                  [keepOpen]="false" 
                  [zIndex] = "1000000"
                  [displayBy]="'property'"
                  [identifyBy] ="'property'"            
                >
                </tag-input-dropdown>
              </tag-input>

【问题讨论】：

如果您在 stackblitz 中重现问题对我们有好处。

标签： angular angular7 ngx-chips

【解决方案1】：

你可以使用separatorKeyCodes属性来实现这个，

 <tag-input formControlName="Tag"
            placeholder = "select"
            secondaryPlaceholder = "select"
            [validators]="Validator"
            [onlyFromAutocomplete]="true"
            [onTextChangeDebounce] = "1000"
            [separatorKeyCodes]="'TAB'" or "TAB" or "[TAB]" //please try this            
            (keyup)="onSearchType($event.target.value)"            
            class="tag-input-class tag-inp">
                <tag-input-dropdown
                  [autocompleteItems]="List"
                  [dynamicUpdate]="true"
                  [appendToBody]="true"
                  [showDropdownIfEmpty]="false"
                  [keepOpen]="false" 
                  [zIndex] = "1000000"
                  [displayBy]="'property'"
                  [identifyBy] ="'property'">
                </tag-input-dropdown>
              </tag-input>

【讨论】：

separatorKeyCodes 必须在“标签输入”控制中。当我按 Tab 键时，焦点位于第一个元素上，但未选中。我必须再次按回车键进行选择。有没有办法，我可以配置标签输入下拉菜单来选择基于 Tab 而不是 ENTER 的项目。如果我将 separatorKeyCodes 放在标签输入下拉列表中，我们会收到不支持的错误。