javascript - 单击时从特定 <li> 标记填充表单

Question

我有一个程序，它接受用户输入并过滤 API，并以 <li> 的形式返回结果。标签。 API 的结果可能大于 1,000，因此我希望用户能够单击特定结果并将其填充到 <form> 。

一切正常，除了如果我有多个结果，然后尝试单击特定的 <li> ，我的input标签填充 every 中的 every 值 <li>在页面上。我错过了什么？

这是<li> .

`
  <li class="populate">
    <span class="name" data-key="name">${place.Name}</span>
    </br>
    <span class="address" data-key="address">${place.Address}</span> <span class="city" data-key="city">${place.City}</span> 
    </br> 
    <span class="state" data-key="state">${place.StateProvince}</span> 
    <span class="postal-code" datakey="postal-code">${place.PostalCode}</span>
    </br> 
    <span class="country" data-key="country">${place.Country}</span>
    </br>
    <span class="dot-code" data-key="dot-code"><span class="highlight">${dotCode}</span></span>
  </li>
`

这是html我在哪里<li>标签去。

<form class="search-form">
    <input type="text" class="search" placeholder="Plant name">
    <ul class="suggestions">
      <li>Results will show here</li>
    </ul>

这是<form>我正在填充。

  <form class="upload-form">
    <input type="text" class="form-two f_code" placeholder="DOT Code" name="dot-code">
    <input type="text" class="form-two f_plant" placeholder="Plant" name="name">
    <input type="text" class="form-two f-add1" placeholder="Address" name="address">
    <input type="text" class="form-two f_add4" placeholder="State" name="state">
    <input type="text" class="form-two f_city" placeholder="City" name="city">
    <input type="text" class="form-two f_zip" placeholder="Zip Code" name="postal-code">
    <input type="text" class="form-two f_cntry" placeholder="Country" name="country">
  </form>

最后，这是我填充<form>的地方。引用 jQuery 文档后，我想到 .index()是一个可能的解决方案，但是我不太确定如何实现它，或者这是否是一个适用的场景。我尝试使用 .index()之后.text()但我知道这是无效的。

$('.suggestions li').click(function() {
  $('.upload-form').children().each(function() {
    let key = $(this).attr('name');
    let txt = $('.populate span[data-key="'+ key +'"]').text();

    $(this).val(txt);
  });
});

一些免责声明:我已经编程了一年多了，而且我已经专业编程了大约两个月，所以如果我遗漏了一些小细节，我深表歉意。

Answer 1

$('.suggestions li').click(function() {
    //keep track of the li that was clicked
    var $li = $(this);

    $('.upload-form').children().each(function() {
        //this was doing a global lookup on the populate.
        //don't do this.  you already have your specific li
        //let txt = $('.populate span[data-key="'+ key +'"]').text();
        let txt = $li.find('span[data-key="'+ this.name +'"]').text();
        //or since the spans class matches the data-key you could use that
        let txt = $li.find('.'+ this.name).text();


        this.value = txt;
    });
});