如何基于输入框的代码值自动填充关联的车型输入框？

嘿，我刚好做过类似的需求，给你一个简洁靠谱的实现方案，一步步来很简单：

1. 先确认你的HTML结构（如果已经写好可以跳过） #

确保你的两个输入框结构是这样的，重点是#car要加上disabled属性：

<input type="text" id="code" name="code" placeholder="请输入代码">
<input type="text" id="car" name="car" disabled placeholder="车型将自动填充">

2. 核心的jQuery实现逻辑 #

首先得确保页面引入了jQuery（如果还没加，在<head>里插这段就行）：

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

然后写处理输入的脚本，我给你写好了完整的，直接复制用就行：

$(document).ready(function() {
    // 先把代码和车型的对应关系存在一个对象里，找起来超方便
    const codeCarMap = {
        '1001': 'BMW',
        '2351': 'MAZDA',
        '3331': 'HONDA'
    };

    // 监听输入框的实时输入事件，键盘输入、粘贴都能触发
    $('#code').on('input', function() {
        const inputVal = $(this).val().trim(); // 去掉前后空格，避免误判
        const targetCar = codeCarMap[inputVal]; // 查找对应的车型

        // 给禁用的输入框赋值，没匹配到就清空
        $('#car').val(targetCar || '');
    });
});

为啥这么写？给你拆解下关键点 #

• 用对象存映射关系：比用数组遍历效率高多了，以后要加新的代码车型，直接往codeCarMap里加键值对就行，不用改逻辑。
• 用input事件而不是keyup：input能覆盖所有输入场景，比如用户右键粘贴、用输入法输入，都能实时触发，体验更好。
• trim()处理：防止用户不小心输入空格导致匹配失败，细节拉满。
• 空值处理：输入的代码不在列表里时自动清空车型框，不会残留旧内容。

额外的优化小建议 #

• 如果想支持部分输入提示（比如输入10就显示BMW相关），可以改下逻辑，遍历codeCarMap的键来做模糊匹配。
• 要是想更友好，可以加个小提示，比如输入无效代码时显示“请输入正确的车型代码”。

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