Html 如何将我的第一个输入框链接到数据库中的另一个输入框

我想将我的输入文本链接到另一个输入文本，但它会像在数据库中一样进行规划

例如：我想在第一个输入框（名称项）中输入“Acesulfame”，然后在第二个输入框中输入“Sweeteners”（子类别），在第三个输入框中输入“0001”（Oracle代码）

那我该怎么办呢？这只是一个例子

<div class="form-group">
        <label class="control-label col-sm-3" for="code_oracle">Code Oracle</label>
        <div class="col-sm-9">
            <input name='code_oracle' type='text' class='form-control' placeholder='Code Oracle' required title='Code Revision Formula' id="code_oracle" value=""></input>
        </div>
    </div>
    <div class="form-group">
            <label class="control-label col-sm-3" for="name_item">Name Item</label>
            <div class="col-sm-9">
                <input name='name_item' type='text' class='form-control' placeholder='Nama Sample' required title='Name Sample' id="name_item" value=""></input>
            </div>
    </div>
    <div class="form-group">
            <label class="control-label col-sm-3" for="category">Sub. Category</label>
            <div class="col-sm-9">
                 <input name='category' type='text' class='form-control' placeholder='Sub. Category' required title='Sub. Category' id="category" value=""></input>
            </div>
    </div>

代码甲骨文
名称项目
小类

我的真实代码在下面

<input name='kode_oracle' type='text' class='form-control' placeholder='Kode Oracle' required data-toggle='tooltip' data-placement='left' title='Kode Revisi Formula' id='kode_oracle'>
<input name='nama_item' type='text' class='form-control' placeholder='Nama Sederhana' required data-toggle='tooltip' data-placement='left' title='Nama Sederhana' id='nama_item' onkeyup='fill()'>
<input name='sub_kategori' type='text' class='form-control' placeholder='Sub. Kategori' required data-toggle='tooltip' data-placement='left' title='Sub. Kategori' id='sub_kategori'>

---

有人能帮我吗？我在任何地方都找不到代码，也无法创建代码来执行此操作。

要达到预期效果，请使用下面的选项

通过AJAX调用以JSON格式从数据库获取数据

将respone对象指定给变量数据

使用onkeyup函数按名称值自动填充输入框

HTML:

---

Codepen-

如果只使用PHP，则需要刷新页面以更新其他输入。如果您想以交互方式使用它，可以使用javascript。然后，您需要用javascript加载数据库，或者进行AJAX调用以从服务器加载数据。从你提供的代码来看，还不清楚你的意图是什么，也许你可以给我们提供更多的信息？代码只是我代码中的一个示例，我真的很困惑这种情况，我一直在任何地方寻找代码，但它是零。我一直在codepen.io上尝试它，与你一样，它正在工作，但是当我尝试它时，我的代码不起作用了，发生了什么事吗？我也使用引导，因为引导还是其他什么？大家帮忙~！我想这对我来说已经足够清楚了，但是我对代码有一个问题，它不能与PHP一起工作，你能告诉我JS应该在第一个文件或第二个文件中放在哪里吗，因为我有一个2.PHP文件，在js文件上创建并使用AJAX调用和onkeyup函数，并将其包含在PHP文件中？>我已经将该代码放在我的第一个文件.PHP中，但它还不起作用，我再次需要一些建议，你能吗？你试着把它添加到第二个文件中了吗？我的第二个文件.php专注于查询我的第一个文件.php，所以它不能放在那里

<div class="form-group">
        <label class="control-label col-sm-3" for="code_oracle">Code Oracle</label>
        <div class="col-sm-9">
            <input name='code_oracle' type='text' class='form-control' placeholder='Code Oracle' required title='Code Revision Formula' id="code_oracle" value=""></input>
        </div>
    </div>
    <div class="form-group">
            <label class="control-label col-sm-3" for="name_item">Name Item</label>
            <div class="col-sm-9">
                <input name='name_item' type='text' class='form-control' placeholder='Nama Sample' required title='Name Sample' id="name_item" value="" onkeyup="fill()"></input>
            </div>
    </div>
    <div class="form-group">
            <label class="control-label col-sm-3" for="email">Sub. Category</label>
            <div class="col-sm-9">
                 <input name='category' type='text' class='form-control' placeholder='Sub. Category' required title='Sub. Category' id="category" value=""></input>
            </div>
    </div>

var data =[{
  "name":"Acesulfame",
  "sub":"Sweeteners",
  "code":"0001"
 },{
    "name":"XYZ",
  "sub":"abc",
  "code":"0002"
 },{
    "name":"AAA",
  "sub":"ZZZ",
  "code":"0003"
 }]

var fill =function(){

    var result = data.filter(function( obj ) {
     return obj.name == document.getElementById('name_item').value;
    });

    document.getElementById('category').value = result[0].sub;
    document.getElementById('code_oracle').value =result[0].code;

}