Ext combobox 下拉多选框带搜索功能

ExtJS 中的 ComboBox 组件是一个下拉框组件，用于从已知的预定义列表中选择一个选项。如果要实现带搜索功能的多选下拉框，可以使用 ExtJS 的 ComboBox 组件和 MultiSelect 组件结合使用。

首先，需要创建一个 ComboBox 组件，设置其 `multiSelect` 属性为 true，这样可以允许多选。然后，使用 `tpl` 属性指定下拉框的模板，为其添加一个搜索框，并使用自定义的函数来处理搜索框中的输入值。

接着，使用 `listConfig` 属性来配置下拉框列表的相关属性，例如：`loadingText`、`emptyText`、`itemSelector`、`itemTpl` 等等。其中，`itemTpl` 属性可以设置列表项的模板，用于显示下拉框中的选项。

最后，使用 `queryMode` 属性设置 ComboBox 组件的查询模式，可以选择 local 或 remote。如果选择 local 模式，那么数据源需要提前加载到客户端；如果选择 remote 模式，那么每次输入都会向服务器发送请求，获取匹配的数据。

下面是一段示例代码，展示了如何在 ExtJS 中实现带搜索功能的多选下拉框：

Ext.create('Ext.form.field.ComboBox', {
    fieldLabel: 'Choose State',
    multiSelect: true,
    queryMode: 'local',
    displayField: 'name',
    valueField: 'abbr',
    store: Ext.create('Ext.data.Store', {
        fields: ['abbr', 'name'],
        data: [{
            "abbr": "AL",
            "name": "Alabama"
        }, {
            "abbr": "AK",
            "name": "Alaska"
        }, {
            "abbr": "AZ",
            "name": "Arizona"
        }, {
            "abbr": "AR",
            "name": "Arkansas"
        }]
    }),
    tpl: Ext.create('Ext.XTemplate',
        '<tpl for=".">',
        '<tpl if="xindex == 1">',
        '<div class="search-box">',
        '<input type="text" class="search-input" placeholder="Search..." />',
        '</div>',
        '</tpl>',
        '<tpl if="xindex &gt; 1">',
        '<div class="item-wrap">',
        '<div class="item-name">{name}</div>',
        '<div class="item-abbr">{abbr}</div>',
        '</div>',
        '</tpl>',
        '</tpl>'
    ),
    listConfig: {
        loadingText: 'Loading...',
        emptyText: 'No matching states found.',
        itemSelector: '.item-wrap',
        itemTpl: Ext.create('Ext.XTemplate',
            '<div class="item-name">{name}</div>',
            '<div class="item-abbr">{abbr}</div>'
        )
    },
    listeners: {
        afterrender: function(combo) {
            var inputEl = combo.getEl().down('.search-input');
            inputEl.on('keyup', function(e) {
                var value = e.target.value;
                if (value) {
                    combo.store.filterBy(function(record) {
                        var name = record.get('name');
                        return (name.toLowerCase().indexOf(value.toLowerCase()) !== -1);
                    });
                } else {
                    combo.store.clearFilter();
                }
            });
        }
    }
});

在上面的代码中，我们首先创建了一个 ComboBox 组件，并设置其 `multiSelect` 属性为 true。然后，使用 `tpl` 属性定义了下拉框的模板，其中添加了一个搜索框，并使用 `itemTpl` 属性定义了列表项的模板。

接着，我们使用 `listConfig` 属性配置了下拉框列表的相关属性，例如：`loadingText`、`emptyText`、`itemSelector`、`itemTpl` 等等。

最后，我们在 ComboBox 组件的 `afterrender` 事件中为搜索框添加了一个键盘输入事件监听器，当用户输入时，会根据输入值过滤数据源。这里使用了 store 的 `filterBy` 方法来实现过滤功能。

希望这段代码可以帮助你实现一个带搜索功能的多选下拉框。