两个input框的关联匹配

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

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

两个input框的关联匹配_第1张图片两个input框的关联匹配_第2张图片

实现代码:

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];

 

你可能感兴趣的:(两个input框的关联匹配)