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(); 
});