英文:
Autofill fields form when selected value from database
问题
我希望做与此教程这里相同的事情，但不是单独填充每个字段，我希望当我选择第一个名字时，其他字段根据从数据库中选择的first name的值自动填充。
英文:
I wish to do the same thing as this tutorial here but instead of populate every field separately, I wish when I select the first name, the other fields autofill according to the selected value of first name from database.
答案1
得分: 1
在一个名称字段中设置一个事件监听器，其中包含其中一个名称。调用一个函数来填充输入字段。我希望你会发现它有用。
请看下面的代码：
<form>
<input
type="text"
name="first_name"
id="first_name"
placeholder="名字"
/>
<input
type="text"
name="last_name"
id="last_name"
placeholder="姓氏"
/>
</form>
<script>
// 这些数据来自 ajax 请求：
var namesFromDB = ["约翰·多伊", "费伦茨·明塔", "海因兹·杜芬斯米尔茨博士"];
// 变量初始化：
var firstNames = {};
var lastNames = {};
// 当文档加载时
$(function () {
// 循环遍历名称并按空格拆分它们
$.each(namesFromDB, function (index, val) {
let nameSplit = val.split(" ");
// 处理名称或发音。您可以进一步扩展这个。
switch (nameSplit.length) {
case 3:
firstNames[index] = nameSplit[0] + " " + nameSplit[1];
lastNames[index] = nameSplit[2];
break;
case 4:
firstNames[index] =
nameSplit[0] + " " + nameSplit[1] + " " + nameSplit[2];
lastNames[index] = nameSplit[3];
break;
default:
firstNames[index] = nameSplit[0];
lastNames[index] = nameSplit[1];
break;
}
});
// 更改事件监听器：
// 当用户从输入框中点击离开，并且失去焦点时，此事件处理程序将触发并设置其他输入字段：
$("#first_name").on("change", function (e) {
let fVal = $("#first_name").val();
let fKey = Object.keys(firstNames).find((k) => firstNames[k] === fVal);
$("#last_name").val(lastNames[fKey]);
});
// 它是相同的，您可以通过创建一个函数来改进它（抱歉，我有点懒）：
$("#last_name").on("change", function () {
let lVal = $("#last_name").val();
let lKey = Object.keys(lastNames).find((k) => lastNames[k] === lVal);
$("#first_name").val(firstNames[lKey]);
});
// 数据源声明。因为我们在这种情况下使用对象，所以只需要值。
$("#first_name").autocomplete({
source: Object.values(firstNames),
});
$("#last_name").autocomplete({
source: Object.values(lastNames),
});
});
</script>
希望这对你有所帮助。
英文:
Set an event listener on one of the name filelds, which contains one of the names. Call a function to populate the input fields. I hope you 'll find it useful
See code below:
<form>
<input
type="text"
name="first_name"
id="first_name"
placeholder="First Name"
/>
<input
type="text"
name="last_name"
id="last_name"
placeholder="Last Name"
/>
</form>
<script>
//This comes from the ajax request:
var namesFromDB = ["John Doe", "Ferenc Minta", "Dr. Heinz Doofenshmirtz"];
//Var init:
var firstNames = {};
var lastNames = {};
//When the doc loads
$(function () {
//Loop over the names to split them by whitespace
$.each(namesFromDB, function (index, val) {
let nameSplit = val.split(" ");
//To handle the names or pronunciations. You can extend this further more.
switch (nameSplit.length) {
case 3:
firstNames[index] = nameSplit[0] + " " + nameSplit[1];
lastNames[index] = nameSplit[2];
break;
case 4:
firstNames[index] =
nameSplit[0] + " " + nameSplit[1] + " " + nameSplit[2];
lastNames[index] = nameSplit[3];
break;
default:
firstNames[index] = nameSplit[0];
lastNames[index] = nameSplit[1];
break;
}
});
//The change event listeners:
//When the user click away from the input, and it lost its focus, this event handler will trigger and sets the other input field:
$("#first_name").on("change", function (e) {
let fVal = $("#first_name").val();
let fKey = Object.keys(firstNames).find((k) => firstNames[k] === fVal);
$("#last_name").val(lastNames[fKey]);
});
//It's the same, you can improve this by making a function for it (sry, im lazy):
$("#last_name").on("change", function () {
let lVal = $("#last_name").val();
let lKey = Object.keys(lastNames).find((k) => lastNames[k] === lVal);
$("#first_name").val(firstNames[lKey]);
});
//Source declaration for the datas. Because we use objects in this case, we need only the values.
$("#first_name").autocomplete({
source: Object.values(firstNames),
});
$("#last_name").autocomplete({
source: Object.values(lastNames),
});
});
</script>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论