jquery - 自动完成 jquery 1.8 和 mvc razor

Question

我对 MVC 和自动完成几乎没有任何问题。

我在 ViewBag 和表单中生成了一个列表。自动完成工作正常，但是当我尝试提交表单时，它总是在第二次获得正确的 ID。

---

<script>
    (function ($) {
        $.widget("custom.combobox", {
            _create: function () {
                this.wrapper = $("<span>")
          .addClass("custom-combobox")
          .insertAfter(this.element);

                this.element.hide();
                this._createAutocomplete();

            },

            _createAutocomplete: function () {
                var selected = this.element.children(":selected"),
          value = selected.val() ? selected.text() : "";

                this.input = $("<input>")
          .appendTo(this.wrapper)
          .val(value)
          .attr("title", "")
          .addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left ui-corner-right")
          .autocomplete({
              delay: 0,
              minLength: 0,
              source: $.proxy(this, "_source")
          })
          .tooltip({
              tooltipClass: "ui-state-highlight"
          })

                this._on(this.input, {
                    autocompleteselect: function (event, ui) {
                        ui.item.option.selected = true;
                        this._trigger("select", event, {
                            item: ui.item.option
                        });
                    },

                    autocompletechange: "_removeIfInvalid"
                });
            },

            _createShowAllButton: function () {
                var input = this.input,
          wasOpen = false;


                $("<a>")
          .attr("tabIndex", -1)
          .attr("title", "")
          .tooltip()
          .appendTo(this.wrapper)
          .button({
              icons: {
                  primary: "ui-icon-triangle-1-s"
              },
              text: false
          })
          .removeClass("ui-corner-all")
          .addClass("custom-combobox-toggle ui-corner-right")
          .mousedown(function () {
              wasOpen = input.autocomplete("widget").is(":visible");
          })
          .click(function () {
              input.focus();

              // Close if already visible
              if (wasOpen) {
                  return;
              }

              // Pass empty string as value to search for, displaying all results
              input.autocomplete("search", "");
          });
            },

            _source: function (request, response) {
                var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
                response(this.element.children("option").map(function () {
                    var text = $(this).text();
                    if (this.value && (!request.term || matcher.test(text)))
                        return {
                            label: text,
                            value: text,
                            option: this
                        };
                }));
            },

            _removeIfInvalid: function (event, ui) {

                // Selected an item, nothing to do
                if (ui.item) {
                    return;
                }

                // Search for a match (case-insensitive)
                var value = this.input.val(),
          valueLowerCase = value.toLowerCase(),
          valid = false;
                this.element.children("option").each(function () {
                    if ($(this).text().toLowerCase() === valueLowerCase) {
                        this.selected = valid = true;
                        return false;
                    }
                });

                // Found a match, nothing to do
                if (valid) {
                    return;
                }

                // Remove invalid value
                this.input
          .val("")
          .attr("title", value + " didn't match any item")
          .tooltip("open");
                this.element.val("");
                this._delay(function () {
                    this.input.tooltip("close").attr("title", "");
                }, 2500);
                this.input.data("ui-autocomplete").term = "";
            },

            _destroy: function () {
                this.wrapper.remove();
                this.element.show();
            }
        });
    })(jQuery);

    $(function () {
        $("#Id").combobox();
        $("#toggle").click(function () {
            $("#Id").toggle();
        });
    });
  </script>

---

View:

@using (Html.BeginForm("GetProviderListPost", "ManageProduct", FormMethod.Post, new { id="product"}))
{  
    <p>
        Select the Product available:</p>
   @Html.DropDownListFor(model => model.Id, new SelectList(ViewBag.Product, "Id", "ExternalDescription"), string.Empty)
     <input type="submit" name="button" value="Search " /> 
}

---

Controller:
 [HttpPost]
        public ActionResult GetProviderListPost(ViewModelManageProduct model)
        {
            List<FulfilmentProvider> fulfilProviderList = rp.fulfilmentProviderList();

            ViewBag.fulfilProvider = fulfilProviderList;          

            ViewBag.Product = new List<StockItemMapping>(stockItemMapping());

            int ID;

             ID = model.Id;
             model.ProductID = ID;


            try
            {
                List<ProductProvider> list = new List<ProductProvider>();
                if (ModelState != null)
                {                   
                    list = rp.GetProvider(ID);

                }

                model.providerList = list.ToList();

            }
            catch (Exception)
            {

                throw;
            }

            return View("ManageProduct", model);

        }