Jquery 自动完成 - 在多个输入字段中添加值
Jquery autocomplete - add value in multiple input fields
我需要 jquery 自动完成方面的帮助。自动完成本身工作正常,但我需要根据第一个输入的值在另一个输入字段中填充一个值。
我创建了 https://jsfiddle.net/peh9c20a/ 来说明这个问题。
我有一个三行的表单,每行有两个输入字段。自动完成在第一列输入上实现。
从自动完成(第一列)中选择一个值时,所需的行为是用随机数填充它旁边的输入字段。不幸的是,我能够用数字填充所有输入,而不仅仅是同一行中的输入。
用文字描述这个问题有点复杂,但希望fiddle能帮助理解。
表单是使用 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,即两者的 parent。 (对不起我的英语)
$(this) => 输入已更改
.closest("div.row") => 找到第一个 parent 和 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>
我需要 jquery 自动完成方面的帮助。自动完成本身工作正常,但我需要根据第一个输入的值在另一个输入字段中填充一个值。
我创建了 https://jsfiddle.net/peh9c20a/ 来说明这个问题。
我有一个三行的表单,每行有两个输入字段。自动完成在第一列输入上实现。
从自动完成(第一列)中选择一个值时,所需的行为是用随机数填充它旁边的输入字段。不幸的是,我能够用数字填充所有输入,而不仅仅是同一行中的输入。
用文字描述这个问题有点复杂,但希望fiddle能帮助理解。
表单是使用 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,即两者的 parent。 (对不起我的英语)
$(this) => 输入已更改
.closest("div.row") => 找到第一个 parent 和 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>