Jquery 自动完成 - 在多个输入字段中添加值

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

Answer 1

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>