ExtJS 中的 ComboBox 组件是一个下拉框组件，用于从已知的预定义列表中选择一个选项。如果要实现带搜索功能的多选下拉框，可以使用
ExtJS 的 ComboBox 组件和 MultiSelect 组件结合使用。
首先，需要创建一个 ComboBox 组件，设置其 `multiSelect` 属性为 true，这样可以允许多选。然后，使用 `tpl` 属性指定下拉框的模板，为其添加一个搜索框，并使用自定义的函数来处理搜索框中的输入值。
接着，使用 `listConfig` 属性来配置下拉框列表的相关属性，例如：`loadingT
ext`、`emptyT
ext`、`
itemSelector`、`
itemTpl` 等等。其中，`
itemTpl` 属性可以设置列表项的模板，用于显示下拉框中的选项。
最后，使用 `queryMode` 属性设置 ComboBox 组件的查询模式，可以选择 local 或 remote。如果选择 local 模式，那么数据源需要提前加载到客户端；如果选择 remote 模式，那么每次输入都会向服务器发送请求，获取匹配的数据。
下面是一段示例代码，展示了如何在
ExtJS 中实现带搜索功能的多选下拉框：
```javascript
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="t
ext" class="search-input" placeholder="Search..." />',
'</div>',
'</tpl>',
'<tpl if="xindex > 1">',
'<div class="
item-wrap">',
'<div class="
item-name">{name}</div>',
'<div class="
item-abbr">{abbr}</div>',
'</div>',
'</tpl>',
'</tpl>'
),
listConfig: {
loadingT
ext: 'Loading...',
emptyT
ext: '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` 属性配置了下拉框列表的相关属性，例如：`loadingT
ext`、`emptyT
ext`、`
itemSelector`、`
itemTpl` 等等。
最后，我们在 ComboBox 组件的 `afterrender` 事件中为搜索框添加了一个键盘输入事件监听器，当用户输入时，会根据输入值过滤数据源。这里使用了 store 的 `filterBy` 方法来实现过滤功能。
希望这段代码可以帮助你实现一个带搜索功能的多选下拉框。
681
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
