匹配用户输入时，部分输入框无法自动填充值的技术问题

你的问题出在filter方法的使用逻辑上：当输入"acid"时，代码会遍历com数组的每一项，第一个项Acid匹配成功后会填充电话和地址，但接着遍历第二个项Gosd时匹配失败，又执行了清空操作，把刚填充的内容又清空了；而输入"gosd"时，遍历到第二个项匹配成功后就没有更多项需要处理，所以填充的内容能保留下来。

修复后的完整代码 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="com-name"><br>
<input type="text" name="com-pho"><br>
<input type="text" name="com-add">

input:not(:nth-of-type(1)) { pointer-events:none; }

var com = [ {id:1,name:"Acid",phone:4455,address:'Main'}, {id:2,name:"Gosd",phone:555,address:'Lab'} ];
$('[name="com-name"]').on("keyup",function () {
  // 提取当前输入值并统一转为小写，避免大小写匹配问题
  const inputValue = $(this).val().toLowerCase();
  // 用find方法找到第一个匹配的公司项，找到后立即停止遍历
  const matchedCompany = com.find(item => item.name.toLowerCase() === inputValue);
  
  if (matchedCompany) {
    // 找到匹配项，填充对应信息
    $('[name="com-pho"]').val(matchedCompany.phone);
    $('[name="com-add"]').val(matchedCompany.address);
  } else {
    // 无匹配项，清空后续输入框
    $('[name="com-pho"]').val('');
    $('[name="com-add"]').val('');
  }
});

关键优化点 #

• 替换filter为find：find方法在找到第一个匹配项后就会终止遍历，不会像filter那样遍历所有项，避免了后续不匹配项覆盖已填充内容的问题
• 分离匹配与操作逻辑：先确认是否存在匹配项，再统一处理输入框内容，逻辑更清晰，也避免了遍历过程中反复修改输入框的混乱情况
• 提取重复操作：把输入值的小写转换提取为变量，减少重复计算，提升代码可读性

内容的提问来源于stack exchange，提问作者noder