jquery通过扩展select控件实现支持enter或focus选择的方法

首先，为了实现jquery通过扩展select控件实现支持enter或focus选择的方法，需要引入一个jQuery插件 - Select2。Select2是一个基于jQuery的自定义选择框插件，它可以帮助我们快速地将原生的标签转变为Select2插件下拉框。同时可以设置placeholder，允许用户清除已选项，以及设置按Enter键或聚焦时是否触发选择。

示例1：支持输入关键词选择

<select id="select2-search">
  <option value="1">苹果</option>
  <option value="2">香蕉</option>
  <option value="3">西瓜</option>
  <option value="4">哈密瓜</option>
  <option value="5">草莓</option>
</select>

$('#select2-search').select2({
  placeholder: '请选择或输入关键词',
  // 允许搜索和模糊匹配
  minimumInputLength: 1,
  allowClear: true,
  // 设置按Enter键或聚焦时触发选择
  openOnEnter: true,
  openOnFocus: true
});

示例2：支持多选和多层级选择

<select id="select2-multi" multiple>
  <optgroup label="水果">
    <option value="1-1">苹果</option>
    <option value="1-2">香蕉</option>
    <option value="1-3">西瓜</option>
    <option value="1-4">哈密瓜</option>
    <option value="1-5">草莓</option>
  </optgroup>
  <optgroup label="蔬菜">
    <option value="2-1">青菜</option>
    <option value="2-2">黄瓜</option>
    <option value="2-3">番茄</option>
    <option value="2-4">土豆</option>
  </optgroup>
</select>

$('#select2-multi').select2({
  placeholder: '请选择或输入关键词',
  // 设置多级列表
  minimumResultsForSearch: Infinity,
  closeOnSelect: false, // 不关闭下拉框，方便多选
  allowClear: true,
  // 设置按Enter键或聚焦时触发选择
  openOnEnter: true,
  openOnFocus: true
});

通过上述示例，我们可以看到，使用Select2插件在原生的