MVC 4，选择自动完成值时如何填充 3 个文本框？

Posted 2023-04-12

【中文标题】MVC 4，选择自动完成值时如何填充 3 个文本框？

【英文标题】：MVC 4, How to populate 3 textboxs when Autocomplete value is selected?

【发布时间】：2014-06-11 18:14:33

【问题描述】：

我有这个表单，它有一个文本框，我已经附加了自动完成功能，但是我不知道如何在选择值时触发 ActionResult（它返回 json）并获取 json 结果并将其放入文本框. 除了在同一个表单中我有一个下拉列表之外，我希望当我选择一个值时填充下拉列表以及其他 3 个文本框？

这是选择下拉列表时返回的 JSON 结果：

["Price":112,"Discount":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":null],"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 来适应这种情况吗？

【问题讨论】：

你能显示视图/页面和你的代码 JQuery 吗？

【参考方案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();
);