Jquery autocomplete - add value in multiple input fields

Question

I need help with jquery autocomplete. The autocomplete by itself works fine, but I need to fill a value in another input field depending on the value of the first input.

I created https://jsfiddle.net/peh9c20a/ to show this problem.

I have a form with three rows, each row has two input fields. Autocomplete is implemented on the first column of inputs.

When selecting a value from the autocomplete (first column), the desired behavior is to fill the input field next to it with a random number. I am unfortunately able to fill all the inputs with a number, not only the input in the same row.

To describe this problem with the text is a little bit complicated, but I hope that the fiddle will help to understand it.

The form is made dynamically with clone() function, I can´t use different ID attributes for each input.

 $('.item-name').autocomplete({
    lookup:sourceData,
    onSelect: function (suggestion) {
       var number = Math.floor(Math.random()*100);
        $(this).closest($(".item-id").val(number)); //THIS ROW HAS TO BE MODIFIED   
        }
    });

Frenchy · Accepted Answer · 2021-03-06 19:39:14Z

do that:

to access of the input number linked to the input text, you have to go up to the div which is the parent of both. (sorry for my english)

$(this) => input changed

.closest("div.row") => find the first parent with div.row

.find("input[type=number]") => find the input number linked to the text

   $('.item-name').autocomplete({
    lookup:sourceData,
    onSelect: function (suggestion) {
       var number = Math.floor(Math.random()*100);

        $(this).closest("div.row").find("input[type=number]").val(number); 
        }
    });

var sourceData = [
  "Peter",
  "John",
  "Adam",
  "Zack",
  "George",
  "Richard",
  "Brian",
  "Frank",
  "Lars",
  "Quentin",
  "Will"
];

$('.item-name').autocomplete({
  lookup: sourceData,
  onSelect: function(suggestion) {
    var number = Math.floor(Math.random() * 100);

    $(this).closest("div.row").find("input[type=number]").val(number);
  }
});

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.devbridge-autocomplete/1.2.27/jquery.autocomplete.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>

<div id="meal-container">
  <div class="col-12" id="meal-div">
    <div class="form-group">
      <div class="row">
        <div class="col-7">
          <input type="text" placeholder="Add name" class="form-control item-name" name="item-name[]" />
        </div>
        <div class="col-5">
          <input type="number" class="form-control item-id" name="id[]" />
        </div>
      </div>
    </div>
  </div>
  <div class="col-12" id="meal-div">
    <div class="form-group">
      <div class="row">
        <div class="col-7">
          <input type="text" placeholder="Add name" class="form-control item-name" name="item-name[]" />
        </div>
        <div class="col-5">
          <input type="number" class="form-control item-id" name="id[]" />
        </div>
      </div>
    </div>
  </div>
  <div class="col-12" id="meal-div">
    <div class="form-group">
      <div class="row">
        <div class="col-7">
          <input type="text" placeholder="Add name" class="form-control item-name" name="item-name[]" />
        </div>
        <div class="col-5">
          <input type="number" class="form-control item-id" name="id[]" />
        </div>
      </div>
    </div>
  </div>
</div>

Collectives™ on Stack Overflow

Jquery autocomplete - add value in multiple input fields

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related