两个input框的关联匹配

实现效果:第一个input框输入内容正确时,第二个input框会根据第一个input框的不同内容而匹配不同的值

(inpu1模糊搜索可参考https://blog.csdn.net/weixin_44371012/article/details/89716165

实现代码:

const data=[
     {
       "site": "佛山顺德大良逢沙",
       "addr": "广东省佛山市顺德区大良镇水利会"
             },{
       "site": "佛山顺德容桂龙涌",
       "addr": "广东省佛山市顺德区容桂镇龙涌口西堤路"
             },{
       "site": "佛山顺德容桂碧桂",
       "addr": "广东省佛山市顺德区容桂镇扁滘居委会"
             }
]

let siteList=data.map(item => item.site);
    console.log(siteList);  //["佛山顺德大良逢沙","佛山顺德容桂龙涌","佛山顺德容桂碧桂"]

let addrList=data.map(item => item.addr);
    console.log(addrList);  //["广东省佛山市顺德区大良镇水利会","广东省佛山市顺德区容桂镇龙涌口西堤路","广东省佛山市顺德区容桂镇扁滘居委会"]  

//value为获取到的第一个input用户输入的值,index为value在数组siteList中的索引
    let index=siteList.indexOf(value1);

//第二个input框匹配上第一个input框的内容,value2为第二个input框的值
    let value2=addrList[index];

 

(panel.style.maxHeight){ panel.style.maxHeight = null; } else { panel.style.maxHeight = panel.scrollHeight + "可以使用Kettle的"Join Rows"步骤来进行关联匹配并输出结果。该步骤可以根据指定px"; } }); } </script> <style> /* 折叠内容样式 */ .accordion { background-color: #eee; 的关联字段将两个输入流进行关联,合并成一个输出流。具体步骤如下: 1. color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; 首先,使用"Table Input"步骤从源表中读取需要进行匹配的数据,并使用"Select values"步 text-align: left; outline: none; font-size: 16px; transition: 0.4s; } 骤选取需要的字段。 2. 然后,使用"Sort Rows"步骤对输入数据进行排序,以便进行关.active, .accordion:hover { background-color: #ccc; } .panel { padding: 0 18px; background-color:联匹配。 3. 接着,使用"Table Input"步骤从目标表中读取需要匹配的数据,并 #fff; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; } 使用"Select values"步骤选取需要的字段。 4. 使用"Join Rows"步骤将上述两个输入流</style> ``` 7. 表单验证 ``` <!-- 表单验证 --> <form> <label for="name">Name:</label> <input type="text" id="name" name="name" required> <label for="email">Email:</label进行关联匹配,合并成一个输出流。在该步骤中,需要指定关联字段及关联方式> <input type="email" id="email" name="email" required> <input type="submit" value="Submit"> (如左连接、右连接、内连接等)。 5. 最后,使用"Select values"步骤选取需要输出</form> <style> /* 表单验证样式 */ input[type=text], input[type=email] { padding: 12px 20的字段,并使用"Table Output"步骤将结果输出到目标表中。 注意,以上步骤仅为一种实现方式,具体实现方式可能因数据结构、数据量等因素而异。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值