MVC 4，如何在選擇自動完成值時填充3個文本框？

Question

我有這種形式，它有一個文本框，我已經附加了自動完成它，但我不知道如何觸發ActionResult（它返回JSON）時，值被選中並抓住JSON結果並將其放入文本框。 除此之外，我有一個下拉列表，我希望當我選擇一個價值的打擊下拉列表填充，還有其他3個文本框？

[{ 「價格」：

這是當一個下拉列表中選擇JSON結果返回112， 「折扣」：0 「ProductTypeList」：[{ 「ProductTypeId」：3， 「ProductId」：1，「UserId」：2，「Type」：「1 Kg」，「FLEX_FLD1」：null，「FLEX_FLD2」：null，「FLEX_FLD3」：null，「FLEX_FLD4」：null，「FLEX_FLD5」 }]， 「Disounttype」： 「百分比」}]

ProductTypeList項目是我想投入第二dropdownlist和價格，折扣和百分比爲3 textboxes的人。

感謝您的幫助。

編輯：

<div class="editor-label"> 
    @Html.LabelFor(model => model.CustomerNo) 
</div> 
<div class="editor-field"> 
    @Html.TextBoxFor(model => model.CustomerNo, new { @data_cdp_autocomplete = @Url.Action("Autocomplete") }) 
    @Html.ActionLink("Add New A Customer", "CreateCustomer", "Customer") 
    @Html.ValidationMessageFor(model => model.CustomerNo) 
</div> 
<div id="ShopList">   
    <div class="editor-label"> 
     @Html.LabelFor(model => model.CustomerName) 
    </div> 
    <div class="editor-field"> 
     @Html.EditorFor(model => model.CustomerName) 
     @Html.ValidationMessageFor(model => model.CustomerName) 
    </div> 
    <div class="editor-label"> 
     @Html.LabelFor(model => model.CustomerAddress) 
    </div> 
    <div class="editor-field"> 
     @Html.EditorFor(model => model.CustomerAddress) 
     @Html.ValidationMessageFor(model => model.CustomerAddress) 
    </div> 
    <div class="editor-label"> 
     @Html.LabelFor(model => model.CustomerPAACI) 
    </div> 
    <div class="editor-field"> 
     @Html.EditorFor(model => model.CustomerPAACI) 
     @Html.ValidationMessageFor(model => model.CustomerPAACI) 
    </div> 
</div> 
<div class="editor-label"> 
@Html.LabelFor(model => model.ItemName) 
</div> 

<div class="editor-field"> 
<select name="SelectProduct" class="SelectProduct"> 
    <option value="0">SELECT PRODUCT</option> 
    @*Iterating Category ViewModel *@ 
    @foreach (var item in Model) 
    {   
     <option value="@item.ProductId">@item.ItemName 
     </option>        
    } 
    <option value="00">Other</option> 
    </select> 
    </div> 
    <div class="editor-label"> 
     @Html.Label("Item Size") 
    </div> 

    <div class="editor-field"> 
     <select name="SelectSize" class="SelectSize"> 
      <option value="0">SELECT SIZE</option> 
      <option value="00">Other</option> 
     </select> 
    </div> 
    <div class="editor-label"> 
     @Html.LabelFor(model => model.Quantity) 
    </div> 
    <div class="editor-field"> 
     @Html.EditorFor(model => model.Quantity) 
     @Html.ValidationMessageFor(model => model.Quantity) 
    </div> 
    <div class="editor-label"> 
     @Html.LabelFor(model => model.Price) 
    </div> 
    <div class="editor-field"> 
     @Html.EditorFor(model => model.Price) 
     @Html.ValidationMessageFor(model => model.Price) 
    </div> 

    var submitAutocompleteForm = function (event, ui) { 

    var $input = $(this); 
    $input.val(ui.item.label); 

    var $form = $input.parents("form:first"); 
    $form.submit(); 
}; 

var createAutocomplete = function() { 
    var $input = $(this); 

    var options = { 
     source: $input.attr("data-cdp-autocomplete"), 
     select: submitAutocompleteForm 
    }; 

    $input.autocomplete(options); 
}; 

$("form[data-cdp-ajax='true']").submit(ajaxFormSubmit); 
$("input[data-cdp-autocomplete]").each(createAutocomplete); 

這個位於js文件，並刷新頁面提交第一種形式，這不是一個好主意。

我是新來的jquery。你可以請給我看一些解決方案jquery，以適應這種情況。

Answer 1

我認爲，要填充三個文本盒，當一些事件發生在您的視圖：

爲此，您可以簡單地這樣，

<div class="three-textbox"> 
      <fieldset> 
       <div class="editor-label"> 
       price 
       </div> 
       <div class="editor-field"> 
       <input type="text" id="price" name="price" /> 
       </div> 
       <div class="editor-label"> 
       discount 
       </div> 
       <div class="editor-field"> 
       <input type="text" id="discount" name="discount" /> 
       </div> 
       <div class="editor-label"> 
       percentage 
       </div> 
       <div class="editor-field"> 
       <input type="text" id="percentage" name="percentage" /> 
       </div> 
       </fieldset> 
      </div> 

jQuery代碼會是這樣的：

$(document).ready(function(){ 
    $(".three-textbox").hide(); 
}); 

$('.dropone').change(function() { //event changed function 
    $(".three-textbox").slideDown(); **OR** $(".three-textbox").show(); 
});