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

Question

我们将 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>

Answer 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>