ユーザーの入力に基づいて入力フィールドにデータを表示

Question

私はこの簡単な形式の最初の入力フィールドに基づいて食品の表示名を持っています。

これは機能していますが、カテゴリ（果物、肉、野菜）に別のフィールドを追加したいと思います。

は、どのように私は最後のフィールド

元に食べ物のカテゴリを表示することができます。 1 - アップル - フルーツ

おかげ

CODE

var obj = { 
    1:'Apple', 
    2:'Chicken', 
    3:'Carrots', 
    4:'Mango', 
    5:'Beef', 
    6:'Squash' 
} 

$('#num').on('keyup',function() { 
    var key = $(this).val(), 
     result = obj[key], 
     $category = $('#category') 
    if (result != undefined) { 
    $category.val(result); 
    } else { 
    $category.val(''); 
    } 
}) 

FIDDLE

https://jsfiddle.net/gprkzs0s/1/

Answer 1

どのようにオブジェクトの配列について。

function food(id, food, category) { 
 
    var self = this; 
 
    this.id = id; 
 
    this.food = food; 
 
    this.category = category; 
 
}; 
 

 
function model() { 
 
    var self = this; 
 
    this.foods = []; 
 
} 
 

 
var mymodel = new model(); 
 

 
$(function() { 
 
    mymodel.foods.push(new food(1, 'Apple', 'Fruit')); 
 
    mymodel.foods.push(new food(2, 'Chicken', 'Meat')); 
 
    mymodel.foods.push(new food(3, 'Carrots', 'Vegetable')); 
 
    mymodel.foods.push(new food(4, 'Mango', 'Fruit')); 
 
    mymodel.foods.push(new food(5, 'Beef', 'Meat')); 
 
    mymodel.foods.push(new food(6, 'Squash', 'Vegetable')); 
 

 
    $('#num').on('keyup change', function() { 
 
    var key = $(this).val(); 
 
    $category = $('#category') 
 
    $food = $('#food') 
 
    $category.val(''); 
 
    $food.val(''); 
 
    $.each(mymodel.foods, function(index, item) { 
 
     if (item.id == key) { 
 
     $category.val(item.category); 
 
     $food.val(item.food); 
 
     } 
 
    }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="number" id="num" class="form-control" name="number" placeholder="Enter Section Number"> 
 
<input type="text" id="category" class="form-control" name="category"> 
 
<input type="text" id="food" class="form-control" name="food">