jQuery如何实现文本框输入时触发下拉选框筛选并展示匹配选项

你的原有代码存在两个核心问题：

• 匹配到符合规则的选项时仅触发了alert弹窗，没有添加选项显示的逻辑
• 未处理输入框内容清空时，所有选项恢复显示的逻辑

修正后可直接使用的代码 #

JS部分替换为如下内容即可：

$('#location_from_input').keyup(function() {
  var txt = $(this).val().toLowerCase();
  $('#location_from option').each(function() {
    var currentText = $(this).text().toLowerCase();
    // 输入为空 或者 选项文本以输入内容为前缀 就显示，否则隐藏
    $(this).toggle(txt === '' || currentText.indexOf(txt) === 0);
  });
  // 可选功能：输入后自动聚焦展开下拉框，方便直接选择
  $('#location_from').focus();
});

原有HTML代码无需修改。如果需要匹配选项文本中任意位置的内容，而非仅匹配前缀，将currentText.indexOf(txt) === 0修改为currentText.includes(txt)即可。

内容的提问来源于stack exchange，提问作者Habib Ur Rehman