一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能

要实现一个用JavaScript写的Select支持上下键、首字母筛选以及回车取值的功能可以分为以下几个步骤：

要实现一个用JavaScript写的Select支持上下键、首字母筛选以及回车取值的功能可以分为以下几个步骤：

1. 创建一个select元素并隐藏原生的下拉列表。可以使用CSS的display:none或者position:absolute; left:-9999px; 等方法来实现。

<select id="mySelect" style="display:none;">
  <option value="opt1">Option 1</option>
  <option value="opt2">Option 2</option>
  <option value="opt3">Option 3</option>
  <option value="opt4">Option 4</option>
  <option value="opt5">Option 5</option>
</select>

1. 创建一个文本框用来模拟下拉列表，并在其下方插入一个显示选项的列表框。同时在文本框的keydown事件中添加上下键和回车键的事件处理函数。

<div style="position:relative;">
  <input id="mySelectTxt" placeholder="请选择" />
  <ul id="mySelectList"></ul>
</div>

const mySelect = document.getElementById('mySelect');
const mySelectTxt = document.getElementById('mySelectTxt');
const mySelectList = document.getElementById('mySelectList');
let options = [];
for (let opt of mySelect.options) {
  options.push(opt.textContent);
}
function filterOptions(keyword) {
  return options.filter(o => o.toLowerCase().startsWith(keyword.toLowerCase()));
}
function updateList(keyword) {
  const filteredOptions = filterOptions(keyword);
  mySelectList.innerHTML = '';
  for (let opt of filteredOptions) {
    const li = document.createElement('li');
    li.textContent = opt;
    li.addEventListener('click', () => {
      mySelectTxt.value = opt;
      mySelect.focus();
      mySelectList.innerHTML = '';
    });
    mySelectList.appendChild(li);
  }
}
mySelectTxt.addEventListener('keydown', e => {
  if (e.keyCode === 38) { // Up arrow
    if (mySelectList.childNodes.length > 0) {
      const selected = mySelectList.querySelector('.selected');
      if (selected) {
        if (selected.previousSibling) {
          selected.classList.remove('selected');
          selected.previousSibling.classList.add('selected');
        }
      } else {
        mySelectList.lastChild.classList.add('selected');
      }
    }
  } else if (e.keyCode === 40) { // Down arrow
    if (mySelectList.childNodes.length > 0) {
      const selected = mySelectList.querySelector('.selected');
      if (selected) {
        if (selected.nextSibling) {
          selected.classList.remove('selected');
          selected.nextSibling.classList.add('selected');
        }
      } else {
        mySelectList.firstChild.classList.add('selected');
      }
    }
  } else if (e.keyCode === 13) { // Enter
    const selected = mySelectList.querySelector('.selected');
    if (selected) {
      mySelectTxt.value = selected.textContent;
    }
    mySelect.focus();
    mySelectList.innerHTML = '';
  }
});
mySelectTxt.addEventListener('input', e => {
  updateList(e.target.value);
});

1. 在文本框的input事件中筛选出符合输入框内内容的下拉列表选项并展示出来。可以使用字符串的indexOf或正则表达式等方式来搜索符合条件的选项，并展示出来。

function filterOptions(keyword) {
  return options.filter(o => o.toLowerCase().startsWith(keyword.toLowerCase()));
}
function updateList(keyword) {
  const filteredOptions = filterOptions(keyword);
  mySelectList.innerHTML = '';
  for (let opt of filteredOptions) {
    const li = document.createElement('li');
    li.textContent = opt;
    li.addEventListener('click', () => {
      mySelectTxt.value = opt;
      mySelect.focus();
      mySelectList.innerHTML = '';
    });
    mySelectList.appendChild(li);
  }
}
mySelectTxt.addEventListener('input', e => {
  updateList(e.target.value);
});

示例1：

<select id="mySelect" style="display:none;">
  <option value="1">China</option>
  <option value="2">Japan</option>
  <option value="3">South Korea</option>
  <option value="4">Thailand</option>
  <option value="5">Indonesia</option>
  <option value="6">Vietnam</option>
  <option value="7">Malaysia</option>
  <option value="8">Singapore</option>
  <option value="9">Philippines</option>
</select>

<div style="position:relative;">
  <input id="mySelectTxt" placeholder="请选择" />
  <ul id="mySelectList"></ul>
</div>

<script>
const mySelect = document.getElementById('mySelect');
const mySelectTxt = document.getElementById('mySelectTxt');
const mySelectList = document.getElementById('mySelectList');
let options = [];
for (let opt of mySelect.options) {
  options.push(opt.textContent);
}
function filterOptions(keyword) {
  return options.filter(o => o.toLowerCase().startsWith(keyword.toLowerCase()));
}
function updateList(keyword) {
  const filteredOptions = filterOptions(keyword);
  mySelectList.innerHTML = '';
  for (let opt of filteredOptions) {
    const li = document.createElement('li');
    li.textContent = opt;
    li.addEventListener('click', () => {
      mySelectTxt.value = opt;
      mySelect.focus();
      mySelectList.innerHTML = '';
    });
    mySelectList.appendChild(li);
  }
}
mySelectTxt.addEventListener('input', e => {
  updateList(e.target.value);
});
</script>

示例2：

<select id="mySelect" style="display:none;">
  <option value="option1">Red</option>
  <option value="option2">Green</option>
  <option value="option3">Blue</option>
  <option value="option4">Yellow</option>
  <option value="option5">Black</option>
  <option value="option6">White</option>
</select>

<div style="position:relative;">
  <input id="mySelectTxt" placeholder="请选择" />
  <ul id="mySelectList"></ul>
</div>

<script>
const mySelect = document.getElementById('mySelect');
const mySelectTxt = document.getElementById('mySelectTxt');
const mySelectList = document.getElementById('mySelectList');
let options = [];
for (let opt of mySelect.options) {
  options.push(opt.textContent);
}
function filterOptions(keyword) {
  return options.filter(o => o.toLowerCase().startsWith(keyword.toLowerCase()));
}
function updateList(keyword) {
  const filteredOptions = filterOptions(keyword);
  mySelectList.innerHTML = '';
  for (let opt of filteredOptions) {
    const li = document.createElement('li');
    li.textContent = opt;
    li.addEventListener('click', () => {
      mySelectTxt.value = opt;
      mySelect.focus();
      mySelectList.innerHTML = '';
    });
    mySelectList.appendChild(li);
  }
}
mySelectTxt.addEventListener('input', e => {
  updateList(e.target.value);
});
</script>