jsp中extjs可查询下拉框html代码和js代码

以下是一个示例的jsp页面中，使用extjs实现的可查询下拉框的html代码和js代码：

HTML代码：

<div id="searchCombo"></div>

JS代码：

Ext.require(['Ext.form.field.ComboBox', 'Ext.data.Store']);

Ext.onReady(function() {
    // 创建store
    var store = Ext.create('Ext.data.Store', {
        fields: ['name', 'value'],
        data: [
            {name: '选项1', value: '1'},
            {name: '选项2', value: '2'},
            {name: '选项3', value: '3'},
            {name: '选项4', value: '4'},
            {name: '选项5', value: '5'}
        ]
    });
    // 创建可查询下拉框
    var searchCombo = Ext.create('Ext.form.field.ComboBox', {
        renderTo: 'searchCombo',
        store: store,
        queryMode: 'local',
        displayField: 'name',
        valueField: 'value',
        typeAhead: true,
        typeAheadDelay: 500,
        minChars: 1,
        hideTrigger: true,
        queryParam: 'name',
        listConfig: {
            loadingText: '正在加载...',
            emptyText: '无匹配结果',
            getInnerTpl: function() {
                return '<div class="search-item">{name}</div>';
            }
        }
    });
});

解释：

1. 首先创建了一个Ext.data.Store对象，用于存储下拉框的选项数据，包括每个选项的名称和值。
2. 然后创建了一个Ext.form.field.ComboBox对象，用于显示可查询下拉框。设置了一些属性，包括数据源（store）、查询模式（queryMode）、显示字段（displayField）、值字段（valueField）、自动完成（typeAhead）、最小输入字符数（minChars）、隐藏下拉箭头（hideTrigger）、查询参数名称（queryParam）等。
3. 最后在listConfig属性中设置了下拉框的列表样式，包括加载中文本（loadingText）、无匹配结果文本（emptyText）和样式模板（getInnerTpl）。

通过这些代码，就可以在jsp页面中创建一个可查询下拉框。