選択したときに別のフィールドにJqueryオートコンプリートを記入します。

Question

私は複数の入力フィールドを使用して構築しています。私は現在、リモートJSONレスポンスでオートコンプリートを行っています。私はそれを持っていたいので、商品名をクリックすると、説明と価格のような残りの商品情報が私のために記入されます。テキスト入力IDは説明と価格です。これをどうすれば完了できますか？私は今、以下のjavascriptコードを持っていて、それは製品名で動作します。

のJavascriptファイル：

$(document).ready(function() { 
    "use strict"; 

    var searchRequest = null; 
    $("#product-search").autocomplete({ 
     minLength: 3, 
     source: function(request, response) { 
      if (searchRequest !== null) { 
       searchRequest.abort(); 
      } 
      searchRequest = $.ajax({ 
       url: '/includes/estimate-search.php', 
       method: 'post', 
       dataType: "json", 
       data: {term: request.term}, 
       success: function(data) { 
        searchRequest = null; 
        response($.map(data, function(Product) { 
         return { 
          value: Product.Name, 
          label: Product.Name 
         }; 
        })); 
       } 
      }).fail(function() { 
       searchRequest = null; 
      }); 
     } 
    }); 
}); 

JSONレスポンス例：

[ 
    { 
     "Name": "Control 4 C4-EA1", 
     "Description": "Control4 EA-1 Entertainment and Automation Controller", 
     "SKU": "C4-EA1", 
     "Cost": "xxx.00 ", 
     "Price": "xxx.00 " 
    } 
] 

HTML部分：

<table id="estimate" class="dispaly table table-striped"> 
    <thead> 
     <tr> 
      <th class="col-md-2">Name</th> 
      <th class="col-md-4">Description</th> 
      <th class="col-md-2">SKU</th> 
      <th class="col-md-2">Cost</th> 
      <th class="col-md-2">Price</th> 
     </tr> 
    </thead> 
    <tbody id="estimate_row"> 
     <tr> 
      <td><input type="text" name="product-search" id="product-search" class="form-control typeahead" placeholder="Product Name" /></td> 
      <td><input type="text" name="description" id="description" class="form-control typeahead" placeholder="Description" /></td> 
      <td><input type="text" name="sku" id="sku" class="form-control typeahead" placeholder="SKU" /></td> 
      <td><div class="input-group"><span class="input-group-addon">$</span><input type="text" name="cost" id="cost" class="form-control typeahead" placeholder="Cost" /></div></td> 
      <td><div class="input-group"><span class="input-group-addon">$</span><input type="text" name="price" id="price" class="form-control typeahead" placeholder="Price" /></td></div></td> 
     </tr> 
    </tbody> 
</table> 

Answer 1

はここで働いてjsfiddleです：https://jsfiddle.net/jonolayton/4Le0ugka/

そして、私はdocument.readyブロックを使用しています... ...私は多くの人々がこれを改善することができると確信してい

var objArray = [ 
    { 
     "Name": "Control 4 C4-EA1", 
     "Description": "Control4 EA-1 Entertainment and Automation Controller", 
     "SKU": "C4-EA1", 
     "Cost": "123.00", 
     "Price": "456.00" 
    }, 
    { 
     "Name": "Something else", 
     "Description": "Something more", 
     "SKU": "AB-CD1", 
     "Cost": "789.00", 
     "Price": "101.00" 
    } 
]; 
var nameArray = []; 
var descArray = []; 
var skuArray = []; 
var costArray = []; 
var priceArray = []; 

$(document).ready(function() { 
    "use strict"; 

    buildArrays(); 

    var searchRequest = null; 
    $("#product-search").autocomplete({ 
     minLength: 3, 
     source: nameArray, 
     select: function(event, ui) { 
      var val = ui.item['value']; 
      fillOtherValues(val); 
     } 
    }); 
}); 

function buildArrays() { 

    $(objArray).each(function(key) { 

     for (i=1; i<objArray.length; i++) { 
      nameArray.push(this.Name); 
      descArray.push(this.Description); 
      skuArray.push(this.SKU); 
      costArray.push(this.Cost); 
      priceArray.push(this.Price); 
     } 
    }); 
} 

function fillOtherValues(val) { 
    var index = $.inArray(val, nameArray); 
    $('input#description').val(descArray[index]); 
    $('input#sku').val(skuArray[index]); 
    $('input#cost').val(costArray[index]); 
    $('input#price').val(priceArray[index]); 
} 

それは美しいではありませんが、それは動作します

、しかし：ここで私がやったことです明らかに、AJAX呼び出しの中でこの関数を実行し、objArrayではなく呼び出しから返されたデータを使用するようにコードを変更する必要があります。

また、使用する変数がグローバルであることに注意してください。and there are associated risks！