title: MVC 4, How to populate 3 textboxs when Autocomplete value is selected?
body: <p>I have this form which has a text box and I have already attached autocomplete to it, but i dont know how to trigger the ActionResult(it returns json) when the value is selected and grab the json result and put it into textboxes.
  Beside that in the same form I have a drop down list, I want when I select a value the blow dropdown list is populated and also the other 3 textboxes?</p>
  
  <p>This is the JSON result returned when a drop down list is selected :</p>
  
  <blockquote>
    <p>[{"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":"Percentage"}]</p>
  </blockquote>
  
  <p><code>ProductTypeList</code> items are the ones I want to put into second <code>dropdownlist</code> and Price,Discount and Percentage into 3 <code>textboxes</code>.</p>
  
  <p>Appreciate your help.</p>
  
  <p>EDIT:</p>
  
  <pre><code> &lt;div class="editor-label"&gt;
      @Html.LabelFor(model =&gt; model.CustomerNo)
  &lt;/div&gt;
  &lt;div class="editor-field"&gt;
      @Html.TextBoxFor(model =&gt; model.CustomerNo, new { @data_cdp_autocomplete = @Url.Action("Autocomplete") })
      @Html.ActionLink("Add New A Customer", "CreateCustomer", "Customer")
      @Html.ValidationMessageFor(model =&gt; model.CustomerNo)
  &lt;/div&gt;
  &lt;div id="ShopList"&gt;          
      &lt;div class="editor-label"&gt;
          @Html.LabelFor(model =&gt; model.CustomerName)
      &lt;/div&gt;
      &lt;div class="editor-field"&gt;
          @Html.EditorFor(model =&gt; model.CustomerName)
          @Html.ValidationMessageFor(model =&gt; model.CustomerName)
      &lt;/div&gt;
      &lt;div class="editor-label"&gt;
          @Html.LabelFor(model =&gt; model.CustomerAddress)
      &lt;/div&gt;
      &lt;div class="editor-field"&gt;
          @Html.EditorFor(model =&gt; model.CustomerAddress)
          @Html.ValidationMessageFor(model =&gt; model.CustomerAddress)
      &lt;/div&gt;
      &lt;div class="editor-label"&gt;
          @Html.LabelFor(model =&gt; model.CustomerPAACI)
      &lt;/div&gt;
      &lt;div class="editor-field"&gt;
          @Html.EditorFor(model =&gt; model.CustomerPAACI)
          @Html.ValidationMessageFor(model =&gt; model.CustomerPAACI)
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="editor-label"&gt;
  @Html.LabelFor(model =&gt; model.ItemName)
  &lt;/div&gt;
  
  &lt;div class="editor-field"&gt;
  &lt;select name="SelectProduct" class="SelectProduct"&gt;
      &lt;option value="0"&gt;SELECT PRODUCT&lt;/option&gt;
      @*Iterating Category ViewModel *@
      @foreach (var item in Model)
      {         
          &lt;option value="@item.ProductId"&gt;@item.ItemName
          &lt;/option&gt;                               
      }
      &lt;option value="00"&gt;Other&lt;/option&gt;
      &lt;/select&gt;
     &lt;/div&gt;
      &lt;div class="editor-label"&gt;
          @Html.Label("Item Size")
      &lt;/div&gt;
  
      &lt;div class="editor-field"&gt;
          &lt;select name="SelectSize" class="SelectSize"&gt;
              &lt;option value="0"&gt;SELECT SIZE&lt;/option&gt;
              &lt;option value="00"&gt;Other&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
      &lt;div class="editor-label"&gt;
          @Html.LabelFor(model =&gt; model.Quantity)
      &lt;/div&gt;
      &lt;div class="editor-field"&gt;
          @Html.EditorFor(model =&gt; model.Quantity)
          @Html.ValidationMessageFor(model =&gt; model.Quantity)
      &lt;/div&gt;
      &lt;div class="editor-label"&gt;
          @Html.LabelFor(model =&gt; model.Price)
      &lt;/div&gt;
      &lt;div class="editor-field"&gt;
          @Html.EditorFor(model =&gt; model.Price)
          @Html.ValidationMessageFor(model =&gt; model.Price)
      &lt;/div&gt;
  
    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);
  </code></pre>
  
  <p>This is located in js file, and refreshes the page after submit the first form, which is not a good idea.</p>
  
  <p>I am new with jquery. could you please show me some solution jquery for this to fit this scenario.</p>