如何給我的第一輸入框鏈接到另一個輸入框，它已經在數據庫

Question

我想我輸入文本鏈接到另一個輸入文本，但它會像計劃已在數據庫中，

前：我想在第一個輸入框（Name Item）中輸入「Acesulfame」，然後在第二個輸入框中輸入「Sweeteners」（Sub。Category），在第三個輸入框中輸入「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'> 

誰能幫我？我無法找到的代碼的任何地方，我不能創建一個代碼來做到這一點。

Answer 1

爲了達到預期的效果，請使用以下選項

1. 通過AJAX調用和JSON格式
2. 分配輸入反應的對象變量數據
3. 使用的onkeyup功能的名稱自動填入輸入框從數據庫獲取數據值

HTML：

<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> 

個

JS：

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; 

} 

Codepen- http://codepen.io/nagasai/pen/aBrXod