我需要 jquery 自动完成方面的帮助。自动完成本身工作正常，但我需要根据第一个输入的值在另一个输入字段中填充一个值。
我创建了https://jsfiddle.net/peh9c20a/来显示这个问题。
我有一个三行的表单，每行有两个输入字段。自动完成是在输入的第一列上实现的。
从自动完成（第一列）中选择一个值时，所需的行为是用随机数填充它旁边的输入字段。不幸的是，我能够用数字填充所有输入，而不仅仅是同一行中的输入。
用文字来描述这个问题有点复杂，但我希望小提琴能帮助理解它。
该表单是使用 clone() 函数动态创建的，我不能为每个输入使用不同的 ID 属性。
$('.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
}
});
这样做：
要访问链接到输入文本的输入编号，您必须转到两者的父级 div。（对不起我的英语）
$(this) => 输入已更改
.closest("div.row") => 找到第一个父级div.row
.find("input[type=number]") => 找到链接到文本的输入数字
$('.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>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句