从特定表格填充表格 <li> 点击标签

Question

I have a program that takes a users input and filters an API and returns the results in the form of a <li> tag. The results from the API can be greater than 1,000 so I wanted the user to be able to click on a particular result and have that populate a <form> .

Everything works fine except that if I have multiple results, then try and click on a specific <li> , my input tags populate with every value from every <li> on the page. What am I missing?

This is the <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>
`

This is the html where my <li> tags go.

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

This is the <form> I am populating.

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

Finally, this is where I populate the <form> . After referencing the jQuery documentation, I thought .index() was a possible solution, however I'm not quite sure how to implement it, or if this is even an applicable scenario. I tried using .index() after .text() but I know this isn't valid.

$('.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);
  });
});

Some disclaimers: I've been programming for just over a year now and I've been programming professionally for around 2 months so I apologize if I'm missing some minor detail.

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;
    });
});

Answer 2

The part you are missing is the $(this) for the li that you clicked. You could try something like this.

$('.suggestions li').click(function() {
   $(this).children('span').each(function() {
      let key = $(this).attr('data-key');
      let txt = $(this).text();          

      $('.upload-form[name="' + key + '"]').val(txt);
   });
});