在 ExtJS 标记字段中选择值后，输入字段不会被清除

Question

我有 ExtJS 标记字段，其中 anyMatch = true。现在，如果您键入 AB，它将显示结果，一旦您选择了选择，它将清除您输入的输入，即 AB 现在当您有anyMatch= true 那个时候如果我输入 HI 它会显示结果但是当你选择值时输入字段不会被清除。我看到在 clearInput 方法中明确处理的 ExtJS 标记字段代码。我想知道为什么要以这种方式实施？下面是示例代码

    Ext.create('Ext.form.Panel', {
    title: 'Tag Field Example',
    width: 1000,
    bodyPadding: 10,

    items: [{
        xtype: 'fieldcontainer',
        labelWidth: 100,
        layout: 'hbox',
        items: [{
            xtype: 'fieldcontainer',
            defaults: {
                flex: 1,
            },
            layout: 'hbox',
            items: [{

                xtype: 'tagfield',
                minChars: 1,
                anyMatch: true,
                allowBlank: true,
                margin: '5 5 5 5',
                fieldLabel: 'Tag Field 1',
                name: 'tagField1',
                store: ['ABC D', 'EFG HI', 'C'],
                queryMode: 'local',
                filterPickList: true,
                emptyText: 'Multi Select...'
            }]
        }]
    }],
    renderTo: Ext.getBody()
});

Answer 1

这似乎是一个错误。如果您查看 tagfield class definition 中的 clearInput 方法，特别是早期的 return:

部分

if (!Ext.String.startsWith(lastDisplayValue, inputValue, true)) {
    return;
}

您可以看到，如果最后选择的标签字段值不是以键入的输入值开头（'abc d' 以 'ab' 开头，因此字段被清除；'efg hi' 不以 'hi' 开头 - 因此清除被丢弃）。

当您启用 anyMatch 配置时，这显然不起作用。

上面的早期 return 部分应该是这样的：

if (!me.anyMatch) {
    if (!Ext.String.startsWith(lastDisplayValue, inputValue, true)) {
        return;
    }
} else {
    if (lastDisplayValue.toLowerCase().indexOf(inputValue.toLowerCase()) === -1) {
        return;
    }
}

我们在 anyMatch 未启用时保留初始检查，否则，我们检查输入的输入值 是否包含 在最后选择的标签字段值中。

这里是一个fiddle建议的覆盖：https://fiddle.sencha.com/#view/editor&fiddle/32q0

Answer 2

我将数组用于多个字符串值（列表项：Lincoln Abraham，输入值：Abraham Lin）。
那种检查它是否正确匹配的方法。
在我的实现中，输入字符串的最后一部分用作通配符字符串。它还解决了列表项与输入字符串相反的问题，在我的例子中就是这样。

   clearInput: function() {
    var me = this,
      valueRecords = me.getValueRecords(),
      inputValue = me.inputEl && me.inputEl.dom.value,
      lastDisplayValue;
    if (valueRecords.length && inputValue) {
      lastDisplayValue = valueRecords[valueRecords.length - 1].get(me.displayField);

      let inputValueArr = inputValue.split(' ');
      let lastDisplayValueArr = lastDisplayValue.split(' ');
      let matchCount = 0;
      Ext.each(inputValueArr, function(iv, idx1, arr1) {
        Ext.each(lastDisplayValueArr, function(ldv, idx1, arr2) {
          if (!me.anyMatch) {
            if (Ext.String.startsWith(ldv, iv, true)) {
              matchCount++;
            }
          } else {
            if (ldv.toLowerCase().indexOf(iv.toLowerCase()) !== -1) {
              matchCount++;
            }
          }
        });
      });
      if (matchCount < inputValueArr.length) {
        return;
      }
      me.inputEl.dom.value = '';
      if (me.queryMode === 'local') {
        me.clearLocalFilter();
        // we need to refresh the picker after removing
        // the local filter to display the updated data
        me.getPicker().refresh();
      }
    }
  }

在 ExtJS 标记字段中选择值后，输入字段不会被清除

Input field doesn't get cleared after choosing the value in the ExtJS tag field

extjs

extjs6

tagfield